/* ============================================================
   PaleoFit — Design Tokens
   Colors, Type, Spacing, Radii, Shadows, Motion
   ============================================================
   Anchor: GROUNDED. MASCULINE. EVIDENCE-LED.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Fraunces — display serif (masculine cut: opsz 144, SOFT 0, WONK 0)
   Inter — body sans
   Both ship full Romanian diacritic coverage (ă â î ș ț with comma below). */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */

  /* Forest — primary anchor. Use for dark sections, primary buttons, logos. */
  --forest-950: #0E1A14;     /* near-black green, deepest section bg */
  --forest-900: #15281F;
  --forest-800: #1F3A2D;     /* primary brand green */
  --forest-700: #2B4A3B;
  --forest-600: #3A5C4B;
  --forest-500: #4D7361;     /* mid */
  --forest-400: #6B9080;
  --forest-300: #93B0A2;
  --forest-200: #C0D1C7;
  --forest-100: #E0E9E4;
  --forest-50:  #EFF3EF;

  /* Sage / olive — secondary, bridges forest to neutrals. */
  --sage-900: #3E4632;
  --sage-800: #525C44;
  --sage-700: #66704F;
  --sage-600: #7A8B5E;       /* sage anchor */
  --sage-500: #909E76;
  --sage-400: #A8B391;
  --sage-300: #BFC8AD;
  --sage-200: #D6DBC8;
  --sage-100: #E7EADB;

  /* Cream / bone — backgrounds. Never pure white. */
  --bone-50:  #FBF9F4;       /* lightest surface */
  --bone-100: #F4F0E8;       /* primary background */
  --bone-200: #ECE6DA;       /* card / inset */
  --bone-300: #DDD5C4;       /* divider on cream */
  --bone-400: #C8BFAB;

  /* Stone — supporting grays, slightly warm. */
  --stone-900: #2A2823;
  --stone-800: #3D3A33;
  --stone-700: #5A554B;
  --stone-600: #76705F;      /* secondary text on cream */
  --stone-500: #9A9690;      /* muted text */
  --stone-400: #B5B1A8;
  --stone-300: #CFCBC1;
  --stone-200: #E2DED4;
  --stone-100: #EFECE4;

  /* Ink — high-contrast text. Warm-black, not true #000. */
  --ink-900: #14130F;
  --ink-800: #1A1A1A;        /* body text */
  --ink-700: #2A2A28;

  /* Amber — accent. Sparingly. CTAs, key data highlights only. */
  --amber-900: #6E3E14;
  --amber-800: #8C541E;
  --amber-700: #A86328;
  --amber-600: #C97B3B;      /* accent anchor */
  --amber-500: #D89060;
  --amber-400: #E2A684;
  --amber-300: #ECC0A8;
  --amber-200: #F2D5C4;
  --amber-100: #F7E6DA;

  /* Data viz — earth-toned chart palette. No reds. */
  --data-1: var(--forest-700);
  --data-2: var(--sage-600);
  --data-3: var(--amber-600);
  --data-4: var(--stone-600);
  --data-5: var(--forest-300);
  --data-grid: #DDD5C4;

  /* ============================================================
     COLOR — Semantic (light surface, default)
     ============================================================ */

  --bg:           var(--bone-100);   /* page */
  --bg-surface:   var(--bone-50);    /* raised card */
  --bg-inset:     var(--bone-200);   /* sunken / table stripe */
  --bg-dark:      var(--forest-900); /* dark sections */
  --bg-darker:    var(--forest-950);

  --fg:           var(--ink-800);    /* body */
  --fg-strong:    var(--ink-900);    /* headlines */
  --fg-muted:     var(--stone-600);  /* secondary copy */
  --fg-subtle:    var(--stone-500);  /* captions, meta */
  --fg-on-dark:   var(--bone-100);   /* text on forest */
  --fg-on-dark-muted: var(--sage-300);

  --border:       var(--bone-300);   /* default rule */
  --border-strong:var(--stone-400);
  --border-dark:  var(--forest-700);

  --accent:       var(--amber-600);
  --accent-hover: var(--amber-700);
  --accent-press: var(--amber-800);

  --link:         var(--forest-800);
  --link-hover:   var(--forest-900);

  /* Status (kept earth-toned — no red alarms) */
  --status-positive: var(--forest-700);
  --status-warning:  var(--amber-700);
  --status-neutral:  var(--stone-600);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: "Fraunces", "Tiempos Headline", "Charter", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Fraunces axes — keep restrained masculine cut */
  --fraunces-axes: "opsz" 144, "SOFT" 0, "WONK" 0;

  /* ============================================================
     TYPE — Scale (mobile-first; desktop overrides below)
     ============================================================ */
  --fs-display:    clamp(48px, 9vw, 112px); /* hero */
  --fs-h1:         clamp(36px, 6vw, 64px);
  --fs-h2:         clamp(28px, 4.5vw, 44px);
  --fs-h3:         clamp(22px, 3vw, 30px);
  --fs-h4:         18px;
  --fs-lead:       20px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    13px;
  --fs-micro:      11px;     /* eyebrow / labels */

  /* Line heights */
  --lh-display: 0.96;
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-display: -0.025em;
  --ls-heading: -0.015em;
  --ls-body:    0em;
  --ls-eyebrow: 0.16em;       /* uppercase labels */
  --ls-button:  0.02em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container:        1200px;
  --container-narrow: 760px;
  --gutter:           24px;

  /* ============================================================
     RADII — restrained, never pillowy
     ============================================================ */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;           /* only for chips/tags */

  /* ============================================================
     ELEVATION — minimal. No drop shadows on text.
     ============================================================ */
  --shadow-none: none;
  --shadow-hairline: inset 0 0 0 1px var(--border);
  --shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.04), 0 1px 1px rgba(20, 19, 15, 0.03);
  --shadow-md: 0 2px 4px rgba(20, 19, 15, 0.05), 0 4px 8px rgba(20, 19, 15, 0.04);
  --shadow-lg: 0 8px 24px rgba(20, 19, 15, 0.08);

  /* ============================================================
     MOTION — short, no bounces
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.05, 0.68, 0.19);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* ============================================================
   BASE — element styles wired to tokens
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Headings — Fraunces, masculine cut */
h1, h2, h3, h4, h5, h6, .display, .headline {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  color: var(--fg-strong);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1, .display {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
.h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); font-weight: 500; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-body); }

/* Body */
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.micro { font-size: var(--fs-micro); color: var(--fg-muted); }

/* Eyebrow — the workhorse label across the brand */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Quote pull — for the 12 Market Imprints */
.pullquote {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--fg-strong);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
}

/* Mono — for data, numbers, lab values */
code, kbd, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Links */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--link-hover); }

/* HR — hairline rule */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Selection */
::selection { background: var(--forest-800); color: var(--bone-100); }

/* ============================================================
   On dark surface — invert semantic tokens
   ============================================================ */
.on-dark, [data-theme="dark"] {
  --bg:        var(--forest-900);
  --bg-surface: var(--forest-800);
  --bg-inset:  var(--forest-950);
  --fg:        var(--bone-100);
  --fg-strong: var(--bone-50);
  --fg-muted:  var(--sage-300);
  --fg-subtle: var(--forest-300);
  --border:    var(--forest-700);
  --border-strong: var(--forest-600);
  --link:      var(--sage-300);
  --link-hover: var(--bone-50);
  background: var(--bg);
  color: var(--fg);
}