/* ============================================================
   VARIABLES — Design Tokens
   MediCare Clínica Landing Page
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {

  /* ── COLORS: Backgrounds (Deep Slate 950) ── */
  --bg-deep: #020617;
  --bg-card: #0F172A;
  --bg-elevated: #1E293B;
  --bg-hover: #334155;

  /* ── COLORS: Teal Accent ── */
  --teal: #14B8A6;
  --teal-dark: #0D9488;
  --teal-deeper: #0F766E;
  --teal-glow: rgba(20, 184, 166, 0.15);
  --teal-border: rgba(20, 184, 166, 0.28);

  /* ── COLORS: Text ── */
  --white: #f0f2f4;
  --white-dim: rgba(240, 242, 244, 0.68);
  --white-muted: rgba(240, 242, 244, 0.34);

  /* ── COLORS: Borders & Dividers ── */
  --divider: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);

  /* ── TYPOGRAPHY ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --text-xs: 0.80rem;
  --text-sm: 0.92rem;
  --text-base: 1.05rem;
  --text-lg: 1.20rem;
  --text-xl: 1.40rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3.00rem;
  --text-hero: clamp(3.5rem, 8vw, 7rem);

  /* ── SPACING ── */
  --space-xs: 0.40rem;
  --space-sm: 0.70rem;
  --space-md: 1.20rem;
  --space-lg: 2.00rem;
  --space-xl: 3.00rem;
  --space-2xl: 5.00rem;
  --space-3xl: 7.00rem;

  /* ── LAYOUT ── */
  --container: 1200px;
  --navbar-h: 72px;
  --section-pad: 7.5rem 3rem;

  /* ── TRANSITIONS ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.50s;

  /* ── SHADOWS ── */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.45);
  --shadow-teal: 0 8px 24px rgba(20, 184, 166, 0.35);
  --glow-primary: 0 0 20px rgba(20, 184, 166, 0.45);

}