/* ========================================================================
   HUXLEY HQ — Design Tokens (v3, Cera Pro hierarchy)
   ------------------------------------------------------------------------
   Source of truth: design-review/prototype-extract/huxley-hq/project/handoff/tokens.css
   This file is additive — it coexists with legacy styles during migration.

   TYPE HIERARCHY
     Cera Pro Black   -> Hero numerals, page-title display, big stats.
     Cera Pro Bold    -> Card titles, KPI labels, table headers, stamps, buttons.
     Cera Pro Regular -> Body, paragraph, metadata, secondary copy.
     Cera Pro Italic  -> Empty-state explainers, subtle asides.
     Staatliches      -> Hebden-incised-style stamps (rare, decorative).
   ======================================================================== */

/* -------- Cera Pro family (self-hosted .otf, served at /public/fonts/) -------- */
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Regular-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Synthetic 500/600 from Bold so mid-weights render cleanly */
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Bold.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/public/fonts/Cera-Pro-Bold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Primary greens (brand book) */
  --green-dark:   #3e5824;   /* Dark Green  — PMS 4216 */
  --green:        #6ba539;   /* Accent Green — PMS 7737 */
  --green-900:    #2a3d19;
  --green-800:    #3e5824;
  --green-700:    #506f2d;
  --green-600:    #6ba539;
  --green-500:    #83b657;
  --green-400:    #a6c987;
  --green-300:    #c7dbae;
  --green-200:    #e3ecd0;
  --green-100:    #eef2e0;
  --green-50:     #f6f8ec;

  /* Secondary */
  --sky:          #e0f2fb;
  --sky-ink:      #2d6a8c;
  --red:          #e4002b;
  --red-bg:       #fce4e7;

  /* SKU colors */
  --mango-light:      #ffc600;
  --mango:            #ff9800;
  --mango-dark:       #fa4616;
  --peach-light:      #ffa066;
  --peach:            #ffb600;
  --peach-dark:       #f9423a;
  --strawberry-light: #f8485e;
  --strawberry:       #e4002b;
  --strawberry-dark:  #ba0c2f;
  --tangerine-light:  #ff9e1b;
  --tangerine:        #ff7500;
  --tangerine-dark:   #fc4c02;
  --cherry-light:     #c8102e;
  --cherry:           #8b0033;
  --cherry-dark:      #5a001f;

  /* Neutrals */
  --bg:           #faf9f5;
  --bg-subtle:    #f1efe6;
  --surface:      #ffffff;
  --surface-2:    #f6f4eb;
  --border:       #e8e4d6;
  --border-strong:#d8d2bc;
  --divider:      #eeeadd;

  /* Text */
  --ink-900: #171b10;
  --ink-800: #2b311f;
  --ink-700: #434a37;
  --ink-600: #6b7158;
  --ink-500: #8e937b;
  --ink-400: #aeb199;
  --ink-300: #c8cab7;

  /* Semantic */
  --success:    #3e5824;
  --success-bg: #eaf1d9;
  --warning:    #c76200;
  --warning-bg: #ffecd1;
  --danger:     #ba0c2f;
  --danger-bg:  #fce1e6;
  --info:       #2d6a8c;
  --info-bg:    #e0f2fb;

  /* Radii */
  --radius-xs: 3px; --radius-sm: 5px; --radius: 6px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(23, 27, 16, 0.03);
  --shadow-sm: 0 1px 2px rgba(23, 27, 16, 0.05), 0 0 0 1px rgba(23, 27, 16, 0.04);
  --shadow-md: 0 2px 8px rgba(23, 27, 16, 0.07), 0 0 0 1px rgba(23, 27, 16, 0.05);
  --shadow-lg: 0 12px 32px rgba(23, 27, 16, 0.12), 0 2px 6px rgba(23, 27, 16, 0.07);

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ===== Type ===== */
  --font-ui:       'Cera Pro', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:  'Cera Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-accent:   'Staatliches', 'Cera Pro', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — tightened for strong hierarchy */
  --t-micro: 10.5px;
  --t-xs:    11px;
  --t-sm:    12px;
  --t-base:  13.5px;
  --t-md:    14px;
  --t-lg:    16px;
  --t-xl:    20px;
  --t-2xl:   26px;
  --t-3xl:   36px;
  --t-4xl:   52px;
  --t-5xl:   72px;

  /* Layout */
  --nav-h: 56px;
  --subnav-h: 48px;
  --page-max: 1440px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;

  /* Back-compat shims (olive + fruit aliases) */
  --olive-900: var(--green-900);
  --olive-800: var(--green-800);
  --olive-700: var(--green-dark);
  --olive-600: var(--green-700);
  --olive-500: var(--green-600);
  --olive-400: var(--green-500);
  --olive-300: var(--green-400);
  --olive-200: var(--green-300);
  --olive-100: var(--green-200);
  --olive-50:  var(--green-50);

  --fruit-mango:      var(--mango-light);
  --fruit-peach:      var(--peach-light);
  --fruit-strawberry: var(--strawberry);
  --fruit-tangerine:  var(--tangerine);
}

/* ===== Typography utility classes ================================ */

/* Hero numeral — biggest numbers on the page (e.g. KPI totals) */
.t-hero {
  font-family: var(--font-display);
  font-weight: 500;           /* Cera Pro Medium — softer than Black */
  font-size: var(--t-4xl);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}

/* Display — page title */
.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-3xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* Subtitle under page title */
.t-lede {
  font-size: var(--t-md);
  color: var(--ink-600);
  font-weight: 400;
  letter-spacing: -0.003em;
}

/* Section stamp — short all-caps label above groupings */
.t-stamp {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-600);
}

/* Card title — section headings inside cards */
.t-card-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.t-card-sub {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-500);
}

.t-body        { font-size: var(--t-base); color: var(--ink-700); }
.t-body-strong { font-size: var(--t-base); color: var(--ink-900); font-weight: 700; }

.t-meta {
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: -0.003em;
}

.t-aside {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-500);
  font-size: 12.5px;
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.t-num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.t-accent-stamp {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabular { font-variant-numeric: tabular-nums; }
.mono    { font-family: var(--font-mono); }

/* Back-compat legacy classes */
.label {
  font-family: var(--font-ui); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-600);
}
.display      { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; }
.display-cond { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; line-height: 0.95; }
.serif        { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; }
.accent-stamp { font-family: var(--font-accent); letter-spacing: 0.06em; text-transform: uppercase; }

/* ===== Opt-in base ================================================
   Legacy styles in huxley-hq.html already set body/background/font.
   To apply the new type system to a subtree, wrap it in `.hq-ds-scope`
   or add `data-ds="v3"` to the root element. This prevents collisions
   during page-by-page migration.
   ================================================================= */
.hq-ds-scope,
[data-ds="v3"] {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum", "kern";
}
.hq-ds-scope *,
[data-ds="v3"] * { box-sizing: border-box; }

.hq-ds-scope button,
[data-ds="v3"] button { font-family: inherit; cursor: pointer; }

.hq-ds-scope input,
.hq-ds-scope select,
.hq-ds-scope textarea,
[data-ds="v3"] input,
[data-ds="v3"] select,
[data-ds="v3"] textarea { font-family: inherit; }

/* Scrollbar (global, benign) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }