/* Fidget + Gridsmith — Color tokens
   Dark "Material-on-code" palette: near-black surfaces, a red→amber signal
   gradient for anything interactive, blue + green as functional grid/status accents. */
:root{
  /* --- base surfaces (darkest → lightest) --- */
  --fg-ink:      #0f1216;   /* page background */
  --fg-deep:     #12161b;   /* recessed wells: code blocks, faux-canvas */
  --fg-surface-1:#171b21;   /* primary panel / header surface */
  --fg-surface-2:#1c2129;   /* raised: cards, readout strips */
  --fg-surface-3:#262d37;   /* highest: inputs, FAB, chips */

  /* --- signal accent (the brand gradient + its stops) --- */
  --fg-red:   #e44125;      /* solid accent: outlines, borders, accent text */
  --fg-amber: #f5b861;      /* gradient tail, highlight numerals, stars */
  --fg-gradient: linear-gradient(135deg, #e44125, #f5b861);

  /* --- functional accents --- */
  --fg-blue:  #5b9dff;      /* grid columns / container guides / info */
  --fg-green: #4ade80;      /* live / success */

  /* --- text --- */
  --fg-text-hi:  #ffffff;              /* headings, key figures */
  --fg-text-med: #dad9d9;              /* body copy */
  --fg-text-dim: rgba(218,217,217,.55);/* captions, mono meta */
  --fg-text-slate: #6d7586;            /* section labels, muted meta */
  --fg-text-slate-2: #8c95a9;          /* control handles, quiet UI text */
  --fg-text-disabled: rgba(218,217,217,.42);

  /* --- lines & control fills (all derived from one slate rgb: 74,80,92) --- */
  --fg-line:    rgba(74,80,92,.40);    /* dividers, card borders */
  --fg-ctrl:    rgba(74,80,92,.30);    /* control surfaces (segmented track) */
  --fg-ctrl-hover: rgba(74,80,92,.55);
  --fg-track:   rgba(74,80,92,.75);    /* switch off-track */

  /* --- accent tints (badges / soft fills over dark) --- */
  --fg-red-tint:   rgba(228,65,37,.16);
  --fg-blue-tint:  rgba(91,157,255,.16);
  --fg-green-tint: rgba(74,222,128,.16);

  /* --- semantic aliases --- */
  --surface-page:   var(--fg-ink);
  --surface-well:   var(--fg-deep);
  --surface-panel:  var(--fg-surface-1);
  --surface-card:   var(--fg-surface-2);
  --surface-raised: var(--fg-surface-3);
  --text-heading:   var(--fg-text-hi);
  --text-body:      var(--fg-text-med);
  --text-muted:     var(--fg-text-dim);
  --text-label:     var(--fg-text-slate);
  --border-hairline:var(--fg-line);
  --accent:         var(--fg-red);
  --accent-fill:    var(--fg-gradient);
}