/* ============================================================
   Dr. Rusi Zhelev — design tokens
   editorial ink palette · OKLCH-first · single brass accent
   ============================================================ */

:root {
  /* ---------- color : ink palette ------------------------------ */
  /* all neutrals tinted toward the brass hue (~65-85°) for warmth */
  /* hex layer is the fallback for browsers without OKLCH support  */

  --ink:          #1a1814;
  --ink:          oklch(0.21 0.005 60);
  --ink-muted:    #4a4439;
  --ink-muted:    oklch(0.40 0.013 75);
  --ink-soft:     #7e766b;
  --ink-soft:     oklch(0.55 0.012 75);

  --cream:        #f4ede0;
  --cream:        oklch(0.93 0.025 80);
  --cream-deep:   #ece2cf;
  --cream-deep:   oklch(0.89 0.030 80);
  --paper:        #fbf7ee;
  --paper:        oklch(0.97 0.018 85);

  --brass:        #8a5a1e;
  --brass:        oklch(0.47 0.090 65);
  --brass-deep:   #6a4516;
  --brass-deep:   oklch(0.37 0.082 60);
  --brass-soft:   #cab28b;
  --brass-soft:   oklch(0.78 0.060 75);

  --rule:         #d9cdb4;
  --rule:         oklch(0.83 0.030 85);
  --rule-strong:  #b8ab94;
  --rule-strong:  oklch(0.73 0.035 80);

  /* state tokens */
  --focus-ring:   rgba(138, 90, 30, 0.45);
  --focus-ring:   oklch(0.47 0.090 65 / 0.45);
  --selection-bg: rgba(202, 178, 139, 0.55);
  --selection-bg: oklch(0.78 0.060 75 / 0.55);

  /* ---------- typography -------------------------------------- */
  --font-display: 'Source Serif 4', 'Source Serif Pro', 'PT Serif', Georgia, serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  /* type scale — fluid for marketing pages, ratio ≥ 1.25 between steps */
  --text-xs:    0.75rem;                                              /* 12px — eyebrows + labels */
  --text-sm:    0.875rem;                                             /* 14px — captions + footnotes */
  --text-base:  1.0625rem;                                            /* 17px — body desktop */
  --text-md:    1.1875rem;                                            /* 19px — lede / large body */
  --text-lg:    clamp(1.375rem, 0.9rem + 1.2vw, 1.625rem);            /* h4 / section subhead */
  --text-xl:    clamp(1.75rem, 1.1rem + 1.8vw, 2.25rem);              /* h3 */
  --text-2xl:   clamp(2.25rem, 1.4rem + 2.5vw, 3rem);                 /* h2 */
  --text-3xl:   clamp(2.75rem, 1.4rem + 5.4vw, 4.75rem);              /* h1 — display */

  /* line heights */
  --lh-display: 1.05;
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-body:    1.7;

  /* letter spacing */
  --tracking-display: -0.035em;    /* tight on large serif */
  --tracking-tight:   -0.018em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;      /* all-caps labels */

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ---------- spacing (4pt scale) ---------------------------- */
  --space-1:   0.25rem;    /* 4 */
  --space-2:   0.5rem;     /* 8 */
  --space-3:   0.75rem;    /* 12 */
  --space-4:   1rem;       /* 16 */
  --space-5:   1.5rem;     /* 24 */
  --space-6:   2rem;       /* 32 */
  --space-7:   3rem;       /* 48 */
  --space-8:   4rem;       /* 64 */
  --space-9:   6rem;       /* 96 */
  --space-10:  8rem;       /* 128 */
  --space-11:  10rem;      /* 160 */

  /* section rhythm — fluid */
  --section-y:      clamp(5rem, 6vw + 3rem, 10rem);   /* 80px → 160px */
  --section-y-hero: clamp(7rem, 8vw + 4rem, 13rem);   /* 112px → 208px */

  /* ---------- container widths ------------------------------- */
  --w-prose:  42.5rem;     /* 680px — editorial column */
  --w-medium: 56rem;       /* 896px — section content */
  --w-wide:   68.75rem;    /* 1100px — hero band max */
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- radii (minimal) -------------------------------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  8px;

  /* ---------- motion ----------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);     /* primary reveal ease */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:     180ms;
  --dur-base:      280ms;
  --dur-slow:      640ms;
  --dur-reveal:    760ms;

  /* ---------- z-index --------------------------------------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     50;
  --z-overlay: 100;
}

/* respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick:  1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-reveal: 1ms;
  }
}