/* ============================================================
   Dr. Thiago Simões — Neurologia · Design Tokens
   Colors & Typography
   ============================================================ */

/* --- Google Fonts (humanist serif display + humanist sans body) --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- BRAND CORE ---- */
  /* Pantone 426U — deep charcoal (primary ink) */
  --brand-ink:        #3B3E3F;
  --brand-ink-soft:   #4F5354;   /* for body text */
  --brand-ink-mute:   #7A7F80;   /* secondary text */

  /* Pantone 2316C — warm ochre gold (accent) */
  --brand-gold:       #C9A86A;
  --brand-gold-deep:  #A98649;   /* hovers / strong accent */
  --brand-gold-soft:  #E3C98C;   /* highlights */

  /* ---- COMPLEMENTARY PALETTE (harmonic with the core) ---- */
  /* Warm off-whites and creams — the canvas */
  --sand-50:          #FBF8F3;   /* page background */
  --sand-100:         #F5EFE4;   /* section surface */
  --sand-200:         #EBE2CF;   /* subtle divider / card soft */
  --sand-300:         #D9CCAE;   /* strong divider */

  /* Cool muted sage — calming secondary (for tags, soft fills) */
  --sage-50:          #F2F4F0;
  --sage-100:         #E2E8DE;
  --sage-400:         #8FA48A;
  --sage-700:         #4E5D4A;

  /* Dusty terracotta — rare, for warmth in illustrations */
  --clay-400:         #C08E76;
  --clay-100:         #F3E3D9;

  /* Neutral grays (warm-tinted) */
  --neutral-0:        #FFFFFF;
  --neutral-50:       #FAFAF8;
  --neutral-100:      #F1F0EC;
  --neutral-200:      #E3E1D9;
  --neutral-300:      #C9C6BC;
  --neutral-500:      #8C8A82;
  --neutral-700:      #55534D;
  --neutral-900:      #2A2A28;

  /* ---- SEMANTIC TOKENS ---- */
  --bg-page:          var(--sand-50);
  --bg-surface:       var(--neutral-0);
  --bg-surface-soft:  var(--sand-100);
  --bg-inverse:       var(--brand-ink);

  --fg-primary:       var(--brand-ink);
  --fg-body:          var(--brand-ink-soft);
  --fg-muted:         var(--brand-ink-mute);
  --fg-on-brand:      #FFFBF1;        /* on gold / on ink */
  --fg-accent:        var(--brand-gold-deep);

  --border-soft:      var(--sand-200);
  --border-default:   var(--sand-300);
  --border-strong:    var(--neutral-300);

  --accent:           var(--brand-gold);
  --accent-hover:     var(--brand-gold-deep);

  /* Status (low-saturation, clinical) */
  --success:          #6B8F6B;
  --warning:          #C99A4B;
  --danger:           #B36B5E;
  --info:             #6B8091;

  /* ---- TYPOGRAPHY ---- */
  --font-display:     'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:        'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizes (rem-based, 16px root) */
  --fs-xs:   0.75rem;   /* 12 — fine print */
  --fs-sm:   0.875rem;  /* 14 — captions */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — lead body */
  --fs-lg:   1.375rem;  /* 22 — subhead */
  --fs-xl:   1.75rem;   /* 28 — H3 */
  --fs-2xl:  2.25rem;   /* 36 — H2 */
  --fs-3xl:  3rem;      /* 48 — H1 */
  --fs-4xl:  4rem;      /* 64 — display */
  --fs-5xl:  5.5rem;    /* 88 — hero */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;   /* eyebrows / NEUROLOGISTA-style labels */

  /* ---- SPACING (4px grid) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;

  /* ---- RADII ---- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---- SHADOWS (soft, warm-tinted — never sharp blacks) ---- */
  --shadow-xs:  0 1px 2px rgba(59, 62, 63, 0.04);
  --shadow-sm:  0 2px 6px rgba(59, 62, 63, 0.05), 0 1px 2px rgba(59, 62, 63, 0.04);
  --shadow-md:  0 8px 24px rgba(59, 62, 63, 0.06), 0 2px 6px rgba(59, 62, 63, 0.04);
  --shadow-lg:  0 20px 48px rgba(59, 62, 63, 0.08), 0 4px 12px rgba(59, 62, 63, 0.05);
  --shadow-gold: 0 12px 32px rgba(201, 168, 106, 0.22);

  /* ---- MOTION ---- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Apply these classes; don't re-declare sizes inline.
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  font-variation-settings: "opsz" 120;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  font-variation-settings: "opsz" 72;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
  font-variation-settings: "opsz" 48;
}
.ds-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}
.ds-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}
.ds-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.ds-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
/* The signature spaced-label — echoes "N E U R O L O G I S T A" from the logo */
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}
.ds-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

/* ============================================================
   BASE
   ============================================================ */
.ds-reset, .ds-reset * { box-sizing: border-box; }
body.ds-root {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}