/* ==========================================================================
   FO Vision Studio — Design Tokens
   The locked system. Every other stylesheet (base.css, and each page's
   own <page>.css) should reference these variables rather than hardcoding
   colors, spacing, or type sizes. Change a value here and it updates
   everywhere at once.
   ========================================================================== */

:root{
  /* ---- Color: raw palette ---- */
  --black:      #0b0b09;
  --panel:      #141410;
  --panel-2:    #191914;
  --line:       rgba(198,161,91,0.18);
  --line-strong:rgba(198,161,91,0.38);
  --gold:       #c6a15b;
  --gold-bright:#e8c983;
  --gold-deep:  #8a6f3c;
  --ivory:      #f3eee3;
  --muted:      #9c9686;
  --muted-2:    #6f6a5c;

  /* ---- Color: role aliases ----
     Use these in component CSS so intent reads clearly
     ("border", "surface") instead of a raw color name. */
  --background:       var(--black);
  --foreground:        var(--ivory);
  --muted-foreground:  var(--muted);
  --surface:           var(--panel);
  --surface-elevated:  var(--panel-2);
  --border:            var(--line);
  --border-strong:     var(--line-strong);
  --gradient-panel:    linear-gradient(160deg, var(--panel-2), var(--panel));

  /* ---- Shape ---- */
  --radius: 2px;

  /* ---- Spacing scale ---- */
  --sp-1: 8px;
  --sp-2: 14px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 72px;

  /* ---- Type ---- */
  --font-display: 'Inclusive Sans', sans-serif;
  --font-body:    'Inclusive Sans', sans-serif;

  --text-caption:     13px;
  --text-body:        15.5px;
  --text-body-lg:     18px;
  --text-display-sm:  22px;
  --text-display-md:  clamp(24px, 3.4vw, 34px);
  --text-display-lg:  clamp(28px, 3.6vw, 42px);
  --text-display-xl:  clamp(30px, 5vw, 54px);

  /* ---- Motion ---- */
  --dur-fast: 0.2s;
  --dur-med:  0.28s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}