/* ============================================================================
 * FABLE DESIGN — TOKENS
 * A shared, instrument-grade design language extracted from the DropLab DAW
 * (ReliveTheShow) mixer. Cool neutral slate surfaces, hairline borders with a
 * lighter top-edge bevel, small radii, a slate -> cyan -> green data ramp, and
 * mono technical labels. Professional and precise, never cartoonish.
 *
 * Provenance: colours + control treatment lifted from
 *   ReliveTheShow/2026-07-rts-droplab-v1/operator/public/mixer.html  (:root)
 *   ReliveTheShow/2026-07-rts-droplab-web-v1/src/theme/daw.tokens.css (data ramp)
 *
 * Every project VENDORS a copy of this file and links it before its own styles.
 * Consume the semantic --fd-* tokens; do not hardcode the hexes below.
 * ==========================================================================*/

:root {
  /* ---- surfaces: cool neutral slate, layered dark -> light ---- */
  --fd-base:      #17181b;   /* app background            */
  --fd-surface:   #1f2024;   /* card / panel              */
  --fd-surface-2: #26282d;   /* raised panel / inset      */
  --fd-surface-3: #2d3037;   /* control face (top of gradient) */
  --fd-line:      #34373d;   /* hairline border           */
  --fd-line-2:    #3f434b;   /* stronger divider          */
  --fd-bevel:     #6a707a;   /* top-edge highlight -> tactile hardware feel */

  /* ---- ink ---- */
  --fd-ink:    #f2f3f5;
  --fd-muted:  #9aa0a8;
  --fd-faint:  #6b717a;
  --fd-on-accent: #0b0b0c;   /* near-black label on any bright fill (golden rule) */

  /* ---- accents: the DAW pipeline ramp (slate -> cyan -> green) ---- */
  --fd-accent:    #3fc1ff;   /* primary (harp cyan)       */
  --fd-accent-hi: #6fd2ff;   /* hover                     */
  --fd-teal:      #5ad7e0;
  --fd-mint:      #46d6b4;
  --fd-green:     #35c759;   /* go / done / published     */
  --fd-lime:      #9ee04f;
  --fd-warn:      #e8b23f;   /* caution amber             */
  --fd-danger:    #e5484d;   /* error red ONLY            */
  --fd-on-danger: #ffffff;

  /* ---- data / chart semantics ---- */
  --fd-grid:   #262a30;      /* recessive gridlines       */
  --fd-axis:   #6b717a;      /* axis + tick labels        */
  --fd-good:   var(--fd-green);
  --fd-caution:var(--fd-warn);
  --fd-bad:    var(--fd-danger);
  /* categorical series, assigned in fixed order, never cycled */
  --fd-series-1: #3fc1ff;
  --fd-series-2: #9ee04f;
  --fd-series-3: #e8b23f;
  --fd-series-4: #5ad7e0;
  --fd-series-5: #b98cff;

  /* ---- type ---- */
  --fd-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fd-font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Consolas", monospace;
  --fd-fs-micro: 11px;
  --fd-fs-label: 12px;
  --fd-fs-small: 13px;
  --fd-fs-body:  15px;
  --fd-fs-lede:  17px;
  --fd-fs-h3:    19px;
  --fd-fs-h2:    clamp(24px, 3.4vw, 36px);
  --fd-fs-h1:    clamp(32px, 5vw, 54px);
  --fd-lh:       1.55;
  --fd-lh-tight: 1.06;
  --fd-track-label: .04em;   /* mono label tracking       */
  --fd-track-caps:  .14em;   /* uppercase micro-label     */
  --fd-weight-display: 650;

  /* ---- radius: small, instrument-grade (no pills) ---- */
  --fd-r-1: 3px;
  --fd-r-2: 4px;   /* default control */
  --fd-r-3: 6px;
  --fd-r-card: 8px;

  /* ---- space scale ---- */
  --fd-s1: 4px;  --fd-s2: 8px;  --fd-s3: 12px; --fd-s4: 16px;
  --fd-s5: 24px; --fd-s6: 32px; --fd-s7: 48px; --fd-s8: 64px;

  /* ---- elevation: restrained, no bloom ---- */
  --fd-e-1: 0 1px 2px rgba(0,0,0,.45);
  --fd-e-2: 0 10px 30px -18px rgba(0,0,0,.7);
  --fd-e-inset-top: inset 0 1px 0 rgba(255,255,255,.045);   /* the bevel */

  /* ---- the tactile control face (top lighter -> bottom darker) ---- */
  --fd-control: linear-gradient(180deg, var(--fd-surface-3), var(--fd-surface-2));
  --fd-control-hi: linear-gradient(180deg, #363a42, var(--fd-surface-3));

  /* ---- motion ---- */
  --fd-ease: cubic-bezier(.4,.08,.2,1);
  --fd-dur:  .15s;

  --fd-focus: 0 0 0 2px var(--fd-base), 0 0 0 4px var(--fd-accent);
}

:root[data-theme="light"] {
  --fd-base:      #eef1f5;
  --fd-surface:   #ffffff;
  --fd-surface-2: #f4f6f9;
  --fd-surface-3: #eaedf2;
  --fd-line:      #dde1e7;
  --fd-line-2:    #cdd3db;
  --fd-bevel:     #ffffff;

  --fd-ink:    #1a1c20;
  --fd-muted:  #5b626b;
  --fd-faint:  #8b929b;

  --fd-accent:    #1394d6;
  --fd-accent-hi: #0f7fbb;
  --fd-green:     #1f9d4d;
  --fd-warn:      #b7791a;
  --fd-danger:    #c62f36;

  --fd-grid:   #e4e8ee;
  --fd-axis:   #8b929b;

  --fd-control:    linear-gradient(180deg, #ffffff, var(--fd-surface-3));
  --fd-control-hi: linear-gradient(180deg, #ffffff, #e3e7ee);
  --fd-e-inset-top: inset 0 1px 0 rgba(255,255,255,.8);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fd-dur: .001s; }
}