/* ============================================================
   Silver Thumb Games — Color System  ·  "Dark Current"
   ------------------------------------------------------------
   Dusk is the resting dark. Filament is the one warm note.
   Red is the surge — action only, kept under ~10% of any frame.
   Arc is the electric charge — the live, weird teal.
   ============================================================ */

:root {
  /* ---- Core foundations (the four that trace back to the mark) ---- */
  --surge-red:     #DC1F3C;   /* Crimson · the surge, action only */
  --silver-slate:  #4B6D73;   /* Dusk · brand mid                 */
  --cool-light:    #F5F8FD;   /* Light surface · text on dark     */
  --obsidian:      #0A0D0F;   /* Deepest base · text on light     */
  --filament:      #FF8A4A;   /* The single warm note             */
  --copper:        #C25A24;   /* Filament's deeper tone           */

  /* ---- Dusk ramp · dark treatment (page → cards → raised) ---- */
  --dusk-900: #0A0D0F;   /* page / deepest base   */
  --dusk-850: #0F1417;   /* sunken / page-2       */
  --dusk-800: #131A1E;   /* card surface          */
  --dusk-700: #1B2227;   /* raised / hover        */
  --dusk-600: #222B30;   /* overlay / popover     */
  --dusk-300: #4B6D73;   /* slate accent          */
  --dusk-200: #9FB0B4;   /* cool muted / dim text */

  /* ---- Light ramp · light treatment (docs & store) ---- */
  --light-0:   #FFFFFF;
  --light-100: #F4F7F9;
  --light-200: #E6ECEE;
  --light-300: #C7D2D6;
  --light-400: #9FB0B4;
  --light-600: #4B6D73;
  --light-900: #0A0D0F;

  /* ---- Surge · action accent (the red spike) ---- */
  --surge-hot:    #FF3B54;   /* impact / hover           */
  --surge:        #DC1F3C;   /* default rest · Crimson   */
  --brownout:     #96122A;   /* pressed / shadow         */

  /* ---- Arc · the electric charge ----
     Teal-jade, the live current: interactive & "weird" moments, links,
     active states, data highlights and the phosphor glow. Cool foil to the
     two warm notes (crimson surge + filament). Never the studio mark. ---- */
  --arc:        #16C6BE;   /* teal jade · electric rest      */
  --arc-bright: #35E7DD;   /* hover / glow peak              */
  --arc-deep:   #0E9088;   /* pressed / shadow               */

  /* ---- Semantic · UI & docs only (low-chroma dusk/filament family) ---- */
  --info:    #5EA6AE;
  --success: #34A06B;
  --warning: #E0A24E;
  --danger:  #DC1F3C;   /* reuses Crimson */

  /* =========================================================
     SEMANTIC ALIASES — default = Dark Current (dark, resting world)
     ========================================================= */

  /* Surfaces */
  --bg-page:      var(--dusk-900);
  --bg-sunken:    var(--dusk-850);
  --bg-card:      var(--dusk-800);
  --bg-raised:    var(--dusk-700);
  --bg-overlay:   var(--dusk-600);
  --bg-inset:     #0C1013;

  /* Text */
  --text-strong:    var(--cool-light);          /* headings           */
  --text-primary:   #E4ECEF;                     /* body               */
  --text-secondary: var(--dusk-200);             /* captions / dim     */
  --text-muted:     #6B7E83;                      /* placeholder / meta */
  --text-on-surge:  var(--cool-light);           /* text on red        */
  --text-on-filament: var(--obsidian);           /* text on filament   */

  /* Borders / dividers — cool, hairline, brushed */
  --border-subtle:  rgba(159, 176, 180, 0.10);
  --border-default: rgba(159, 176, 180, 0.16);
  --border-strong:  rgba(159, 176, 180, 0.30);
  --border-slate:   var(--silver-slate);

  /* Accents */
  --accent:           var(--surge);         /* the surge — action      */
  --accent-hover:     var(--surge-hot);
  --accent-press:     var(--brownout);
  --accent-soft:      rgba(220, 31, 60, 0.14);
  --filament-accent:  var(--filament);      /* the one warm note       */
  --filament-soft:    rgba(255, 138, 74, 0.14);

  --arc-accent:       var(--arc);           /* electric / interactive accent */
  --arc-hover:        var(--arc-bright);
  --arc-press:        var(--arc-deep);
  --arc-soft:         rgba(22, 198, 190, 0.14);

  /* Interaction */
  --focus-ring:    var(--surge-hot);
  --selection-bg:  rgba(220, 31, 60, 0.30);
  --overlay-scrim: rgba(5, 7, 9, 0.66);
}

/* =========================================================
   LIGHT THEME — docs, store, letterhead. Opt-in.
   Inverse of the dusk ramp; ink for text, slate for accents.
   ========================================================= */
[data-theme="light"] {
  --bg-page:      var(--light-100);
  --bg-sunken:    var(--light-200);
  --bg-card:      var(--light-0);
  --bg-raised:    var(--light-0);
  --bg-overlay:   var(--light-0);
  --bg-inset:     var(--light-100);

  --text-strong:    var(--obsidian);
  --text-primary:   #16201F;
  --text-secondary: #4B5E62;
  --text-muted:     #7E9094;
  --text-on-surge:  var(--cool-light);
  --text-on-filament: var(--obsidian);

  --border-subtle:  rgba(10, 13, 15, 0.07);
  --border-default: rgba(10, 13, 15, 0.12);
  --border-strong:  rgba(10, 13, 15, 0.22);
  --border-slate:   var(--silver-slate);

  --accent-soft:    rgba(220, 31, 60, 0.10);
  --filament-soft:  rgba(194, 90, 36, 0.12);
  --arc-soft:       rgba(22, 198, 190, 0.12);

  --selection-bg:   rgba(220, 31, 60, 0.18);
  --overlay-scrim:  rgba(10, 13, 15, 0.40);
}