/* ==========================================================================
   Cuidar dos Olhos — Clínica Oftalmológica
   Design tokens: colors + typography
   ========================================================================== */

/* ---------- Fonts ----------
   Brand system uses two families (official, approved):
   - Display / logotype feel: "Cal Sans" — distinctive, friendly geometric
     sans with rounded terminals; used for headlines, taglines, and feature
     headings.
   - Body + UI: "Funnel Sans" — variable-weight humanist sans, neutral and
     legible at all sizes; used for body, UI, eyebrows, captions.
   - The small-caps tracked subtitle "CLÍNICA OFTALMOLÓGICA" uses Funnel Sans
     uppercase with +0.18em tracking.
   Files live in assets/fonts/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Cal Sans";
  src: url("assets/fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("assets/fonts/FunnelSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/FunnelSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("assets/fonts/FunnelSans-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/FunnelSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------ Brand core (from logo SVG) ------------------ */
  --brand-navy:        #00577C; /* Primary — deep navy-teal. Wordmark + primary UI. */
  --brand-teal:        #00B3A4; /* Accent — bright teal. Iris/heart, tagline, CTAs. */

  /* Tints + shades around the brand core */
  --navy-900:          #02374E;
  --navy-800:          #003F59;
  --navy-700:          #004C6B;
  --navy-600:          #00577C; /* = brand-navy */
  --navy-500:          #1C6F92;
  --navy-400:          #4D8FAC;
  --navy-300:          #8BB5C9;
  --navy-200:          #C5DAE4;
  --navy-100:          #E6EFF4;
  --navy-050:          #F3F7FA;

  --teal-900:          #005B53;
  --teal-800:          #00776C;
  --teal-700:          #009588;
  --teal-600:          #00B3A4; /* = brand-teal */
  --teal-500:          #2EC3B6;
  --teal-400:          #62D4CA;
  --teal-300:          #97E3DC;
  --teal-200:          #C6EFEA;
  --teal-100:          #E3F7F4;
  --teal-050:          #F1FBF9;

  /* ------------------ Warm neutrals (from consultório photos) ---
     The interior is all soft warm beige walls, blonde wood slats, cream
     upholstery, charcoal accents — this is what brings "acolhimento".
     --------------------------------------------------------------- */
  --cream-050:         #FBF7F1; /* paper / page bg */
  --cream-100:         #F5EEE3; /* card bg, walls */
  --cream-200:         #EDE2CE; /* hover warm surface */
  --cream-300:         #E1D1B4; /* tonal accents */
  --sand-400:          #C9B38C; /* blonde wood mid-tone */
  --sand-500:          #B59872; /* rippado wood */
  --sand-600:          #8E7452; /* darker wood / leather */
  --sand-700:          #6B563E; /* walnut */
  --sand-800:          #4A3B2B; /* deep walnut */

  /* ------------------ Achromatic ------------------ */
  --ink-900:           #1A1D22; /* primary text on light */
  --ink-800:           #2C313A;
  --ink-700:           #404752;
  --ink-600:           #5A6371;
  --ink-500:           #7A8391;
  --ink-400:           #A1A9B5;
  --ink-300:           #C7CCD4;
  --ink-200:           #E3E6EA;
  --ink-100:           #F1F3F5;
  --white:             #FFFFFF;
  --black:             #000000;

  /* ------------------ Semantic foreground ------------------ */
  --fg-1:              var(--ink-900); /* primary text */
  --fg-2:              var(--ink-700); /* secondary text */
  --fg-3:              var(--ink-500); /* tertiary / captions */
  --fg-mute:           var(--ink-400); /* disabled / placeholder */
  --fg-brand:          var(--brand-navy);
  --fg-accent:         var(--teal-700); /* accessible on cream */
  --fg-on-brand:       var(--white);    /* text on navy */
  --fg-on-accent:      var(--white);    /* text on teal */

  /* ------------------ Semantic surfaces ------------------ */
  --bg-page:           var(--cream-050);
  --bg-surface:        var(--white);
  --bg-surface-warm:   var(--cream-100);
  --bg-surface-sunk:   var(--cream-200);
  --bg-brand:          var(--brand-navy);
  --bg-brand-soft:     var(--navy-050);
  --bg-accent:         var(--brand-teal);
  --bg-accent-soft:    var(--teal-050);
  --bg-wood:           var(--sand-500);

  /* ------------------ Lines + strokes ------------------ */
  --line-1:            #E8E0D1; /* warm hairline on cream */
  --line-2:            #D4C9B3; /* divider */
  --line-strong:       #4A3B2B; /* walnut underline accents */
  --ring-focus:        color-mix(in oklab, var(--brand-teal) 60%, transparent);

  /* ------------------ Status ------------------
     Tuned warm, not generic Material. Success uses brand teal family so it
     feels native; warning uses warm amber that lives with the wood palette.
     --------------------------------------------------------------- */
  --success:           #0E9E8A;
  --success-bg:        #E3F7F4;
  --warning:           #C68A2E;
  --warning-bg:        #FBEFD6;
  --danger:            #C04A3D;
  --danger-bg:         #FBE6E2;
  --info:              var(--brand-navy);
  --info-bg:           var(--navy-100);

  /* ------------------ Shadows ------------------
     Two families: "warm" for content cards (like the cove lighting in the
     clinic — soft glow, not crisp), and "crisp" for floating menus.
     --------------------------------------------------------------- */
  --shadow-glow:       0 1px 2px rgba(74, 59, 43, 0.04),
                       0 6px 18px rgba(74, 59, 43, 0.06);
  --shadow-card:       0 1px 2px rgba(30, 22, 12, 0.05),
                       0 10px 28px rgba(30, 22, 12, 0.08);
  --shadow-lift:       0 4px 10px rgba(30, 22, 12, 0.08),
                       0 20px 40px rgba(30, 22, 12, 0.10);
  --shadow-cove:       0 0 0 1px rgba(201, 179, 140, 0.25),
                       0 20px 60px -20px rgba(181, 152, 114, 0.45); /* warm halo */
  --shadow-inset-warm: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ------------------ Radii ------------------
     Mid-round; the logo's eye arcs are soft ellipses, and the interior
     shows rounded arches on the backlit shelves.
     --------------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ------------------ Spacing ------------------ */
  --s-0:  0; /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ------------------ Typography system ------------------ */
  --font-display: "Cal Sans", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weight tokens */
  --fw-light: 300; /* @kind font */
  --fw-reg:   400; /* @kind font */
  --fw-med:   500; /* @kind font */
  --fw-semi:  600; /* @kind font */
  --fw-bold:  700; /* @kind font */

  /* Fluid type scale — generous for a calm, caring clinical feel */
  --fs-display: clamp(44px, 5.2vw, 76px); /* @kind font */
  --fs-h1:      clamp(34px, 3.6vw, 52px); /* @kind font */
  --fs-h2:      clamp(26px, 2.6vw, 36px); /* @kind font */
  --fs-h3:      22px; /* @kind font */
  --fs-h4:      18px; /* @kind font */
  --fs-body:    16px; /* @kind font */
  --fs-body-lg: 18px; /* @kind font */
  --fs-small:   14px; /* @kind font */
  --fs-micro:   12px; /* @kind font */
  --fs-eyebrow: 13px; /* @kind font */

  /* Line heights */
  --lh-tight:   1.1; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Tracking */
  --tr-tight:   -0.01em; /* @kind font */
  --tr-normal:  0; /* @kind font */
  --tr-wide:    0.08em; /* @kind font */
  --tr-caps:    0.18em; /* @kind font */ /* "CLÍNICA OFTALMOLÓGICA" wordmark tracking */
}

/* ==========================================================================
   Semantic element styles (use as classes or base reset)
   ========================================================================== */

.cdo-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-brand);
}

.cdo-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-brand);
}

.cdo-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
}

.cdo-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.cdo-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.cdo-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-reg);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.cdo-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-reg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.cdo-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-reg);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.cdo-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.cdo-tagline {
  /* The signature "Sua visão, nosso cuidado." look — two-tone */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.cdo-tagline .accent { color: var(--fg-accent); }
.cdo-tagline .primary { color: var(--fg-brand); }

.cdo-wordmark-sub {
  /* "CLÍNICA OFTALMOLÓGICA" subtitle */
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--brand-teal);
}

/* ==========================================================================
   Base
   ========================================================================== */

.cdo-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}