/* tokens.css
   SPKTKL Arena UI — Design Tokens (Light + Dark)
*/

:root {
  /* Brand accents (stable) */
  --spktkl-gold: #E6B800;      /* Champion Gold */
  --spktkl-charcoal: #2C2C34;  /* Charcoal Steel */
  --spktkl-white: #FAFAFA;     /* Arctic White */

  /* Type scale (font-agnostic) */
  --fs-1: 12px;  /* metadata */
  --fs-2: 14px;  /* secondary */
  --fs-3: 16px;  /* body */
  --fs-4: 20px;  /* section title */
  --fs-5: 28px;  /* headline */
  --fs-6: 44px;  /* hero digits (countdown, primary amounts) */

  /* Shape */
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 16px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 20px;
}

/* -----------------------------
   DARK THEME TOKENS
------------------------------ */
:root[data-theme="dark"] {
  /* Arena neutrals */
  --canvas-hi:    #21242B;
  --canvas-mid:   #111317;
  --canvas-low:   #1B1E24;
  --canvas-edgeL: #080A0D;
  --canvas-edgeR: #14161B;

  --header-hi:    #2A2D32;
  --header-base:  #16191E;
  --header-edge:  #0A0C0F;

  --rail-top:     #1C1F23;
  --rail-mid:     #171A1E;
  --rail-bot:     #0D1013;

  --panel-base:   #181B1F;
  --panel-hi:     #1C1E23;

  /* Borders */
  --border-subtle: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.10);

  /* Text */
  --text-1: rgba(255,255,255,0.92);
  --text-2: rgba(255,255,255,0.72);
  --text-3: rgba(255,255,255,0.52);

  /* Grain */
  --grain-opacity: 0.032;          /* baseline */
  --grain-opacity-event: 0.042;    /* match countdown / arena moments */
  --grain-opacity-reading: 0.022;  /* legal / dense text */
  --grain-blend: soft-light;
}

/* -----------------------------
   LIGHT THEME TOKENS
------------------------------ */
:root[data-theme="light"] {
  /* Illuminated stage neutrals */
  --canvas-hi:    #FFFFFF;
  --canvas-mid:   #FAF8F4;
  --canvas-low:   #F0ECE4;
  --canvas-edgeL: #E6E1D6;
  --canvas-edgeR: #E6E1D6;

  --header-hi:    #F3F1ED;
  --header-base:  #E9E6E0;
  --header-edge:  #DDD8CF;

  --rail-top:     #EFECE6;
  --rail-mid:     #E2DDD4;
  --rail-bot:     #D4CDBF;

  --panel-base:   #EDE8DE;
  --panel-hi:     #F7F5F0;

  /* Borders */
  --border-subtle: rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.10);

  /* Text */
  --text-1: rgba(0,0,0,0.86);
  --text-2: rgba(0,0,0,0.62);
  --text-3: rgba(0,0,0,0.44);

  /* Grain */
  --grain-opacity: 0.010;          /* optional; set to 0 to disable */
  --grain-opacity-event: 0.012;
  --grain-opacity-reading: 0.008;
  --grain-blend: soft-light;
}