/* =========================================================================
   ONZE Design System — Design Tokens  v0.2
   Concept: Monochrome editorial power. No color — the athletes are the color.
   The neon magenta is a SIGNAL, not a fill. 95% of every page is monochrome.
   v0.2 (founder-approved 2026-07-06): neutrals shifted a few degrees WARM
   (Caribbean warmth, mechanism B) + a gold accent scoped to Collective XI
   contexts only (mechanism C). Logo stays true black & white.
   ========================================================================= */

:root {
  /* ---- Core neutrals (warm) ------------------------------------------- */
  --onze-ink:            #191613;   /* warm near-black: dark chapters, primary text on light */
  --onze-ink-pure:       #000000;   /* LOGO ONLY — never for UI text/surfaces */
  --onze-canvas:         #FAF7F0;   /* warm ivory: light chapters */
  --onze-canvas-soft:    #F2EEE4;   /* alt light surface: chips, alt rows */
  --onze-white:          #FFFFFF;   /* cards lifted on canvas; text on dark */
  --onze-surface-dark:   #242019;   /* nested panel on dark chapters */

  /* ---- Text ---------------------------------------------------------- */
  --onze-body:           #625D54;   /* secondary text on light (warm grey) */
  --onze-mute:           #A29C90;   /* tertiary text / captions on light */
  --onze-on-dark:        #FAF7F0;   /* primary text on dark */
  --onze-on-dark-mute:   rgba(250,247,240,0.64); /* secondary text on dark */

  /* ---- Hairlines (depth without shadow) ------------------------------ */
  --onze-hairline:       #E5E0D5;              /* 1px border on light */
  --onze-hairline-dark:  rgba(255,255,255,0.14);/* 1px border on dark */

  /* ---- Accent — neon magenta SIGNAL --------------------------------- */
  --onze-accent:         #FF1F6B;   /* full neon: dark surfaces, fills, large stats */
  --onze-accent-ink:     #E4005A;   /* deepened: small accent TEXT on light (AA) */
  --onze-accent-press:   #D2004F;   /* pressed/active */
  --onze-on-accent:      #FFFFFF;   /* text on a magenta fill */

  /* ---- Collective XI accent — Caribbean gold (CXI contexts ONLY) ----- */
  /* Founder-approved warmth mechanism C (2026-07-06). Collective XI
     materials (decks, CXI pages, member docs) may use this second signal.
     NEVER on ONZE-core surfaces — magenta stays the ONZE signal. Same
     discipline as magenta: a signal, not a fill. */
  --onze-cxi-accent:       #FFC02E; /* full gold: dark surfaces, large stats */
  --onze-cxi-accent-ink:   #8F6600; /* deepened: small gold TEXT on light (AA) */
  --onze-cxi-accent-press: #DBA414; /* pressed/active */
  --onze-on-cxi-accent:    #191613; /* text on a gold fill (gold is light — ink, not white) */

  /* ---- Typography ---------------------------------------------------- */
  --onze-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --w-light: 300;  --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700;  --w-display: 800;

  /* Type scale (px). Display = shout (800 UPPERCASE); sub-display = calm (300). */
  --fs-display-xl: 88px;  --lh-display-xl: 0.98; --ls-display-xl: -0.03em;
  --fs-display-lg: 56px;  --lh-display-lg: 1.02; --ls-display-lg: -0.025em;
  --fs-display-md: 40px;  --lh-display-md: 1.05; --ls-display-md: -0.02em;
  --fs-display-sm: 28px;  --lh-display-sm: 1.15; --ls-display-sm: -0.01em;
  --fs-title:      22px;  --lh-title:      1.3;  --ls-title:     -0.01em;
  --fs-body-lg:    20px;  --lh-body-lg:    1.5;  --ls-body-lg:    0;
  --fs-body:       16px;  --lh-body:       1.6;  --ls-body:       0;
  --fs-body-sm:    14px;  --lh-body-sm:    1.5;  --ls-body-sm:    0;
  --fs-caption:    12px;  --lh-caption:    1.4;  --ls-caption:    0;
  --fs-eyebrow:    13px;  --lh-eyebrow:    1.3;  --ls-eyebrow:    0.14em; /* UPPERCASE */
  --fs-button:     14px;  --lh-button:     1.0;  --ls-button:     0.06em; /* UPPERCASE */

  /* ---- Shape (sharp / engineered) ----------------------------------- */
  --r-none: 0px;
  --r-sm:   2px;    /* buttons, cards, inputs — the dominant radius */
  --r-full: 9999px; /* avatars / circular icon buttons only */

  /* ---- Spacing (4px base) ------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-8: 48px; --s-section: 96px;

  /* ---- Layout ------------------------------------------------------- */
  --max-content: 1200px;

  /* ---- Elevation ---------------------------------------------------- */
  /* No drop shadows. Depth = surface contrast + hairlines + inversion.  */
}