/**
 * Psychodeli+ Brand Tokens — the design substrate for the consumer control surface.
 *
 * WHY THIS FILE: today the brand lives as ~hundreds of hardcoded hex/rgba values
 * scattered across panels (shared-ui.css had exactly 1 CSS custom property). The
 * consumer Simple surface — and any muriel design against it — must bind to TOKENS,
 * not magic numbers, so the look is on-brand by construction, the 8:1 text floor is
 * enforceable in one place, and "melt-away" timing/translucency stay consistent.
 *
 * SOURCE OF TRUTH: docs/STYLE_GUIDE.md + the sampled palette in
 * muriel-personal/examples/psychodeli-brand.toml. In-app surface = neon-green
 * phosphor (the color you SEE while using Psychodeli; distinct from the MBP studio
 * cyan/gold and from the warm /mac landing palette — do NOT cross them).
 *
 * CONTRAST: every --pd-text-* / --pd-accent* value is verified >= 8:1 on the dark
 * panel ground (Andy's hard floor: "MINIMUM 8:1 CONTRAST RATIO ON ALL TEXT").
 * Ratios noted inline are vs #050510. Fractal/visualizer hues are NOT tokens here
 * (they're engine output and exempt from the text floor).
 */
:root {
  /* ── Ground (near-black; the panel sits over the live visuals) ── */
  --pd-bg:            #050510;            /* primary ground */
  --pd-bg-2:          #0a0a0f;            /* app chrome */
  --pd-bg-3:          #000000;            /* pure black */
  --pd-panel:         rgba(10, 10, 10, 0.85);  /* primary translucent panel */
  --pd-overlay:       rgba(0, 0, 0, 0.40);     /* lighter scrim */

  /* ── Live palette accents (channel tokens) ──
     PaletteAccents (js/lib/palette-accents.js) overwrites these on :root every
     ~600ms with colors sampled from the canvas palette, so all panels track the
     visuals. The values here are the STATIC fallback (legacy green + a cyan
     secondary) used before first sample or when __panelPaletteHue === false. */
  --pd-accent-rgb:    0, 255, 0;          /* primary channels */
  --pd-accent-text:   #aaffaa;            /* primary lightened for >=8:1 text */
  --pd-accent2-rgb:   0, 225, 255;        /* secondary channels (active / selected) */
  --pd-accent2-text:  #aaf3ff;            /* secondary lightened for >=8:1 text */
  --pd-accent3-rgb:   255, 170, 64;       /* tertiary channels (hover — distinct from both) */
  --pd-accent3-text:  #ffd9a8;            /* tertiary lightened for >=8:1 text */
  --pd-accent-fill:   #00ff00;            /* filled-control bg (vivid or lifted for 8:1 label) */
  --pd-accent-on:     #001400;            /* label color that clears 8:1 on --pd-accent-fill */

  /* ── Primary accent (derived from --pd-accent-rgb so it tracks the palette) ── */
  --pd-phosphor:      rgb(var(--pd-accent-rgb));         /* primary accent */
  --pd-phosphor-soft: var(--pd-accent-text);             /* keycaps / labels */
  --pd-phosphor-dim:  #cfe8cf;            /* connective text    ~15:1  */
  --pd-active:        #10b981;            /* emerald active state */

  /* ── Secondary accent (derived from --pd-accent2-rgb) — for hover / active /
     selected affordances, giving the chrome a two-tone language. ── */
  --pd-accent2:        rgb(var(--pd-accent2-rgb));
  --pd-accent2-border: rgba(var(--pd-accent2-rgb), 0.45);
  --pd-accent2-glow:   rgba(var(--pd-accent2-rgb), 0.55);
  --pd-accent3:        rgb(var(--pd-accent3-rgb));
  --pd-accent3-border: rgba(var(--pd-accent3-rgb), 0.45);
  --pd-accent3-glow:   rgba(var(--pd-accent3-rgb), 0.55);

  /* ── Text (all >= 8:1 on --pd-bg) ── */
  --pd-text:          #f0f0f0;            /* body text          ~17:1 */
  --pd-text-muted:    #c8c8d0;            /* secondary text     ~12:1 */
  --pd-text-strong:   rgba(255, 255, 255, 0.95);

  /* ── Translucent UI fills (glassy, non-competitive with the visuals) ── */
  --pd-fill:          rgba(255, 255, 255, 0.12);  /* default control fill */
  --pd-fill-hover:    rgba(255, 255, 255, 0.18);  /* hover */
  --pd-border:        rgba(var(--pd-accent-rgb), 0.40);  /* primary mid-ring border */
  --pd-glow:          rgba(var(--pd-accent-rgb), 0.60);  /* glow / focus ring */

  /* ── Toast accent (PALETTE ITERATION): a bright hue swapped in for the
     legacy neon-green on transient toasts / the parameter indicator. Change
     these three to retune the toast color in one place. Electric cyan starts:
     15.7:1 on #000 (vs green's 14.8:1) — clears the 8:1 text floor. ── */
  --pd-toast-accent:  #00ffff;                     /* toast text + ring */
  --pd-toast-glow:    rgba(0, 255, 255, 0.30);     /* box-shadow halo */
  --pd-toast-shadow:  rgba(0, 255, 255, 0.50);     /* text-shadow halo */

  /* ── Touch & rhythm (mobile-first: 44px floor, 22–45% larger on mobile) ── */
  --pd-touch-min:     44px;              /* WCAG/Apple touch-target floor */
  --pd-radius:        14px;
  --pd-blur:          12px;              /* backdrop-filter blur for glass panels */
  /* Single knob for consumer-UI overlay translucency (pie wedges + element chips). Lower = more of
     the live visual shows through. 1.0 = the old fully-opaque surfaces; the /mac page sits at ~0.4
     (its panels are over a controlled bg). 0.6 here keeps readable text near the 8:1 floor over the
     animated viz while letting the visual breathe. Dial toward 0.4 if contrast holds on your content. */
  --pd-surface-alpha: 0.6;

  /* ── "Melt away": the canonical minimally-distract behavior, as shared timing ── */
  --pd-idle-fade-delay: 2400ms;         /* time of inactivity before controls fade */
  --pd-fade-dur:        420ms;           /* fade in/out duration */
  --pd-fade-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --pd-melt-opacity:    0;               /* fully gone when idle (it's an ambient app) */

  /* ── Z-index lanes (replaces the ad-hoc 9999/1000/900 sprawl for the new surface) ── */
  --pd-z-surface:     1000;             /* the consumer control surface */
  --pd-z-modal:       1100;             /* a focused modal within it */
  --pd-z-toast:       1200;             /* transient toasts */
}

/* Mobile upsizing — the style guide's 22–45% larger touch UI, expressed once. */
@media (max-width: 768px) {
  :root {
    --pd-touch-min: 56px;
    --pd-radius:    18px;
  }
}