/* ===============================================================
   tokens.css — the whole palette, type scale and timing in one
   place. Every other stylesheet reads from here and never hard
   codes a colour.
   =============================================================== */

:root {
  /* Ground */
  --void:        #05070A;
  --deep:        #080B10;
  --panel:       #0C1118;
  --panel-hi:    #111823;
  --line:        rgba(126, 206, 220, 0.14);
  --line-soft:   rgba(126, 206, 220, 0.07);
  --line-hard:   rgba(126, 206, 220, 0.28);

  /* Ink */
  --text:        #DCE7EE;
  --muted:       #71838F;
  --muted-dim:   #46545F;

  /* Holographic accent — the resting state of the interface */
  --holo:        #56E0D6;
  --holo-2:      #7AA5FF;
  --holo-soft:   rgba(86, 224, 214, 0.12);
  --holo-line:   rgba(86, 224, 214, 0.42);
  --holo-glow:   rgba(86, 224, 214, 0.30);

  /* Ember — reserved for the one clip that is live */
  --ember:       #FFA62B;
  --ember-hot:   #FFE2A6;
  --ember-soft:  rgba(255, 166, 43, 0.13);
  --ember-line:  rgba(255, 166, 43, 0.46);

  --danger:      #FF5C6A;
  --danger-soft: rgba(255, 92, 106, 0.12);

  /* Waveform */
  --wave-idle:   #34424E;
  --wave-idle-2: #4A5C6B;
  --wave-live:   #FFA62B;
  --wave-live-2: #FFE2A6;

  /* Type */
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Bricolage Grotesque", "JetBrains Mono", system-ui, sans-serif;

  /* Geometry */
  --r:      8px;
  --r-sm:   5px;
  --bar-h:  68px;
  --gutter: 18px;

  /* Motion — one dial per family so the feel stays consistent */
  --t-fast:  .14s;
  --t-mid:   .24s;
  --t-slow:  .5s;
  --ease:    cubic-bezier(.2, .7, .3, 1);
}

/* The effects layer is switched off wholesale for anyone who asked
   their system for less motion — every fx module also checks this
   in JS so no rAF loop is even started. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-mid: 0s; --t-slow: 0s; }
}