/* ==========================================================================
   FANG FUTURES — design tokens
   Generated from the Figma library: Fang Futures Design System
   https://www.figma.com/design/TxdF42jR59t8a4XNV5DYTj

   These names are the contract. The same strings are the variable names in
   Figma (Dev Mode emits them verbatim) and the CSS custom properties here.
   Change a value in one place and update the other — never fork them.
   ========================================================================== */

:root {
  /* --- brand primaries -------------------------------------------------- */
  --void:          #1D1D1D;
  --oracle-gold:   #D4A837;
  --dustlight:     #FDF5DE;
  --black:         #000000;
  --white:         #FFFFFF;
  --signal-orange: #F0682B;
  --sand:          #D6D2BB;

  /* --- expanded palette — editorial accents only, never structural ------ */
  --aether-blue:   #2B57B2;
  --cosmic-violet: #7E2BD4;
  --garnet-red:    #990000;
  --burnt-orange:  #CC5500;
  --forest-canopy: #006B3C;

  /* --- scales ------------------------------------------------------------ */
  --gold-50:#FDF5DE; --gold-100:#F6E4B0; --gold-200:#EDD082; --gold-300:#E4BD55;
  --gold-400:#D4A837; --gold-500:#B88E2B; --gold-600:#8E6C1F; --gold-700:#5C4614;

  --orange-50:#FFECE2; --orange-100:#FFD3BC; --orange-200:#FFB38F; --orange-300:#FF9160;
  --orange-400:#F0682B; --orange-500:#D75A21; --orange-600:#B2440B; --orange-700:#83330E;

  --sand-50:#EFEDE3; --sand-100:#E4E1D2; --sand-200:#D6D2BB; --sand-300:#C2BDA0; --sand-400:#A8A283;

  --void-0:#000000; --void-50:#0E0E0E; --void-100:#1D1D1D; --void-200:#262626;
  --void-300:#333333; --void-400:#4A4A4A; --void-500:#666666; --void-600:#8A8A8A;

  /* --- semantic (LIGHT default) ------------------------------------------
     These six token groups are what components bind to. Never reference a
     brand primitive directly in a component — go through these.            */
  --bg:            var(--white);
  --bg-alt:        var(--dustlight);
  --surface:       var(--white);
  --fg1:           var(--void);
  --fg2:           rgba(29,29,29,0.78);
  --fg3:           rgba(29,29,29,0.52);
  --fg4:           rgba(29,29,29,0.24);
  --accent:        var(--oracle-gold);
  --accent-ink:    var(--void);
  --accent-2:      var(--signal-orange);
  --accent-2-ink:  var(--white);
  --hairline:        rgba(29,29,29,0.12);
  --hairline-strong: rgba(29,29,29,0.38);
  --frame-colour:  var(--void);

  /* --- status ------------------------------------------------------------ */
  --success: var(--forest-canopy);
  --info:    var(--aether-blue);
  --warn:    var(--burnt-orange);
  --danger:  var(--garnet-red);

  /* --- type -------------------------------------------------------------- */
  --font-sans:    'Sofia Pro', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Sofia Pro', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px; --text-lg:22px;
  --text-xl:28px; --text-2xl:36px; --text-3xl:44px; --text-4xl:56px; --text-5xl:72px;
  --text-6xl:96px; --text-7xl:128px;
  --text-meta:11px; --text-chapter-tag:13px;

  /* fluid display sizes — the Figma library pins these at 1440/768/390 */
  --text-poster:      clamp(3.5rem, 9vw, 10rem);
  --text-poster-sub:  clamp(1.75rem, 4.5vw, 5rem);
  --text-display-md:  clamp(2.25rem, 5vw, 4.5rem);
  --text-h1:          clamp(2.5rem, 5vw, 4rem);
  --text-h2:          clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:          clamp(1.5rem, 2.2vw, 2rem);
  --text-statement:   clamp(1.5rem, 2.25vw, 2.5rem);
  --text-stage-label: clamp(1rem, 1vw, 1.25rem);
  --text-stat-num:    clamp(5rem, 12vw, 11rem);

  --tracking-tighter:-0.045em; --tracking-tight:-0.03em; --tracking-snug:-0.01em;
  --tracking-normal:0; --tracking-wide:0.06em; --tracking-wider:0.1em; --tracking-widest:0.2em;

  --leading-none:0.9; --leading-tight:1.15; --leading-snug:1.3; --leading-body:1.6; --leading-loose:1.7;

  /* --- spacing (4px baseline) -------------------------------------------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:120px;

  /* --- radii — sharp everywhere ------------------------------------------ */
  --radius-none:0; --radius-circle:50%;
  /* DELIBERATE EXCEPTION: the speech bubble's dropped corner — a shape
     signature so the bubble reads as spoken. Not for general use.        */
  --radius-bubble:12px;

  /* --- borders + the frame ------------------------------------------------ */
  --border-hair:   1px solid var(--hairline);
  --border-strong: 1px solid var(--fg1);
  --border-field:  2px solid var(--fg1);
  --frame:         1.5px solid var(--frame-colour);
  --frame-inset:   18px;

  /* --- motion ------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:200ms; --dur-base:300ms; --dur-slow:400ms;

  /* --- layout -------------------------------------------------------------- */
  --container-max: 1400px;
  --container-gutter: 40px;
}

/* ==========================================================================
   SURFACE FLOODS
   The six Semantic modes from Figma, as classes. Put one on a section and
   everything inside recolours — foreground, background, accent, hairline
   and the frame outline, all together.
   ONE flood moment per surface, maximum. Never two shouting.
   ========================================================================== */
.on-void, .on-dark {
  --bg:var(--void); --bg-alt:var(--void-50); --surface:var(--void);
  --fg1:var(--white); --fg2:rgba(255,255,255,0.78); --fg3:rgba(255,255,255,0.52); --fg4:rgba(255,255,255,0.20);
  --hairline:rgba(255,255,255,0.18); --hairline-strong:rgba(255,255,255,0.40);
  --accent:var(--oracle-gold); --accent-ink:var(--void);
  --frame-colour:var(--white);
}
.on-gold {
  --bg:var(--oracle-gold); --bg-alt:var(--gold-500); --surface:var(--oracle-gold);
  --fg1:var(--void); --fg2:rgba(29,29,29,0.80); --fg3:rgba(29,29,29,0.58);
  --hairline:rgba(29,29,29,0.25);
  --accent:var(--void); --accent-ink:var(--oracle-gold);
  --frame-colour:var(--void);
}
.on-signal, .on-orange {
  --bg:var(--signal-orange); --bg-alt:var(--orange-500); --surface:var(--signal-orange);
  --fg1:var(--white); --fg2:rgba(255,255,255,0.86); --fg3:rgba(255,255,255,0.66);
  --hairline:rgba(255,255,255,0.40);
  --accent:var(--white); --accent-ink:var(--signal-orange);
  --accent-2:var(--white); --accent-2-ink:var(--signal-orange);
  --frame-colour:var(--white);
}
.on-sand {
  --bg:var(--sand); --bg-alt:var(--sand-100); --surface:var(--sand);
  --fg1:var(--void); --fg2:rgba(29,29,29,0.78); --fg3:rgba(29,29,29,0.55);
  --hairline:rgba(29,29,29,0.18);
  --accent:var(--signal-orange); --accent-ink:var(--white);
  --frame-colour:var(--void);
}
.on-dustlight {
  --bg:var(--dustlight); --bg-alt:#F4E9C6; --surface:var(--dustlight);
  --fg1:var(--void);
}