/* ============================================================
   Canonical Feltr design system.
   Source: stake-n0v.io "Luxe Black & Gold" (the first surface
   to ship it in production). All Feltr surfaces inherit from here.
   ============================================================ */

/* ============================================================
   stake.n0v.io — design tokens
   Direction: Luxe Black & Gold
   Single source of truth. Every value used in stake.html and
   card-states.html lives here. Group → role → token.
   ============================================================ */

:root {

  /* ---------- COLOR ---------- */

  /* Surfaces & ink */
  --color-bg:               #0D0D0D;   /* page background. near-black, not pure */
  --color-surface:          #141414;   /* card / panel surface */
  --color-surface-raised:   #181818;   /* hover-lifted surfaces (reserved) */
  --color-border:           #2A2A2A;   /* default 1px card edge */
  --color-border-strong:    #3A3A3A;   /* dividers in calculator, slider track */

  /* Text */
  --text-primary:           #E8E0D0;   /* warm off-white. body copy + headings */
  --text-muted:              #7A7068;   /* metadata, labels, "series:" key */
  --text-muted-strong:      #9A8E80;   /* secondary lines (meta row, bullets line) */

  /* Accent — gold. Used once per card max. */
  --color-accent:           #C9A84C;   /* muted antique gold */
  --color-accent-hover:     #E0BE6A;   /* lighter gold for hover/active thumb */
  --color-accent-soft:      rgba(201, 168, 76, 0.12);  /* low-alpha gold fill — bullet selector "checked" bg */

  /* Progress segments — greyscale + gold only. NO red/yellow/green. */
  --color-sold:             #C9A84C;   /* gold fill — sold portion of bar */
  --color-reserved:         #5A4E30;   /* deep bronze — reserved portion */
  --color-empty:            #2A2A2A;   /* available portion = empty/border color */

  /* Status — used sparingly */
  --color-success:          #4A7C59;   /* muted forest green — "confirmed" badge */
  --color-warning:          #8A6A20;   /* dark gold-orange — warning border */
  --color-warning-fg:       #D4A93C;   /* warning text (lifted for legibility) */
  --color-error:            #7A3030;   /* muted red — destructive states */


  /* ---------- TYPOGRAPHY ---------- */

  /* Font families */
  --font-display:           'Oswald', 'Arial Narrow', sans-serif;                 /* event names ONLY — 700 weight, uppercase */
  --font-body:              'DM Sans', system-ui, -apple-system, sans-serif;     /* all UI, labels, copy */
  --font-mono:              'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* numbers, math, codes */

  /* Sizes — mobile baseline, ramps up at >=600px */
  --fs-display:             28px;     /* event name (34px ≥600px) */
  --fs-body:                15px;     /* default body / CTA */
  --fs-small:               13px;     /* metadata, labels, filter selects */
  --fs-mono:                13px;     /* mono — calc output, terms line, progress legend */
  --fs-micro:               11px;     /* timestamps, "series:" label, badge */

  /* Line height */
  --lh-tight:               1.15;     /* display / event name */
  --lh-normal:              1.45;     /* body copy */
  --lh-mono:                1.5;      /* mono blocks */

  /* Weight */
  --fw-body:                400;
  --fw-medium:              500;      /* CTA, pct readout, wordmark */
  --fw-semibold:            600;      /* reserved — section labels if needed */


  /* ---------- SPACING ---------- */

  /* Page-level */
  --space-page-x:           16px;     /* mobile gutter (24px ≥600px) */
  --space-page-y:           20px;     /* top/bottom page padding */
  --space-section:          28px;     /* between major page sections */

  /* Card */
  --space-card-padding:     18px;     /* card internal padding (22px ≥600px) */
  --space-card-gap:         14px;     /* between stacked cards */
  --space-row:              10px;     /* between calculator rows */
  --space-tight:            6px;      /* between adjacent labels and values */


  /* ---------- RADIUS ---------- */

  --radius-card:            4px;      /* card corner */
  --radius-control:         3px;      /* buttons, selects, inputs, badge */
  --radius-pill:            999px;    /* reserved — not used in v1 */


  /* ---------- BORDERS ---------- */

  --border-hairline:        1px solid var(--color-border);
  --border-strong:          1px solid var(--color-border-strong);
  --border-accent:          1px solid var(--color-accent);


  /* ---------- MOTION ---------- */

  --t-fast:                 150ms;    /* the only transition duration on the page */
  --easing:                 cubic-bezier(0.2, 0.6, 0.2, 1);
  /*
     Motion budget: hover transitions on border-color and CTA fill. Nothing else animates.
     No scroll triggers. No accordions. No shimmer. No load-in.
  */


  /* ---------- ELEVATION ---------- */
  /*
     Intentionally none. The design is flat by direction.
     If a future state needs lift, use border-color shift, not box-shadow.
  */


  /* ---------- BREAKPOINTS (reference only — used in @media) ---------- */
  /* mobile-first baseline ............... 0–599px */
  /* comfort .............................. ≥600px */
  /* (no other breakpoints — page is single-column at every width) */
}