/* ── REDESIGN LAYER: "Ember Studio" — layered OVER gipity-theme.css ───────────
   New SEMANTIC tokens only. It never redefines --primary / --surface / Water's
   vars, so :root[data-theme="light"|"blue"] still resolve and degrade cleanly.
   Dark is the committed default (the stage scale is dark by design).

   SHARED FILE: this canonical token block is defined once and reused by BOTH
   styles.css (studio surfaces) and editor.css (editor surfaces). It is linked
   from index.html / studio.html / editor.html BEFORE the per-screen stylesheet.
   The content is dictated verbatim by the "Ember Studio" design spec so both the
   studio and editor restyles resolve the same tokens. */
:root {
  /* Signature accent — warm amber→coral "ember". Ownable, harmonized with the
     existing --primary amber, deliberately NOT Riverside indigo. */
  --accent: #ff6a3d;
  --accent-strong: #ff5227;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --grad-ember: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

  /* RECORD state — dedicated live-red, never the amber brand. */
  --rec: #ff4438;
  --rec-ring: color-mix(in srgb, var(--rec) 55%, transparent);
  --rec-glow: 0 0 0 6px color-mix(in srgb, var(--rec) 22%, transparent);

  /* Stage surface scale (dark-committed; deeper than the base page black). */
  --stage-0: #0a0a0c;   /* app / stage backdrop */
  --stage-1: #141417;   /* raised surface: header, panels, control bar */
  --stage-2: #1b1b1f;   /* cards, tiles, chips base */
  --stage-3: #26262c;   /* elevated / hover controls */
  --stage-4: #33333b;   /* pressed / active fill */

  /* Hairlines — low-alpha WHITE for modern glassy separation (not hard grey). */
  --line: color-mix(in srgb, #ffffff 8%, transparent);
  --line-strong: color-mix(in srgb, #ffffff 15%, transparent);

  /* Ink (text) on the stage */
  --ink: #f4f3f6;
  --ink-dim: #b9b7c2;
  /* Lightened from #7d7b87 so small dim text clears WCAG AA (~5.2:1 on the
     lightest stage surface, higher on darker ones) while keeping the purple tint. */
  --ink-faint: #8f8c9b;

  /* Semantic status (formalizes the ad-hoc success/danger fallbacks). */
  --ok: #35c46b;
  --danger: #ff5a52;
  /* Caution / warning — amber, deliberately distinct from the coral ember
     --accent so a problem (dropped connection, stalled transfer) reads as caution
     rather than brand. */
  --warn: #f5a623;

  /* Radii — soft-round system */
  --r-tile: 16px;
  --r-card: 14px;
  --r-control: 20px;   /* the floating bottom control bar */
  --r-chip: 999px;
  --r-btn: 999px;
  --r-input: 10px;
  --r-sm: 8px;

  /* Spacing — finer scale on top of gipity's --space-* */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Elevation */
  --shadow-tile: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.34);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28);
  --shadow-pop:  0 16px 44px rgba(0,0,0,.52), 0 0 0 1px var(--line);
  --shadow-bar:  0 10px 34px rgba(0,0,0,.55), 0 0 0 1px var(--line-strong);
  --shadow-accent: 0 6px 22px color-mix(in srgb, var(--accent) 42%, transparent);

  /* Focus — visible on the dark stage, two-tone so it reads on any surface */
  --focus-ring: 0 0 0 2px var(--stage-0), 0 0 0 4px var(--accent);

  /* Motion */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms;
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}

/* Blanket reduced-motion guard — honors the token promise app-wide (studio,
   editor, landing, live) even for animations/transitions that hardcode durations
   instead of the --dur-* tokens. Loaded on every page via tokens.css. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* App-wide focus ring — a consistent ember :focus-visible outline so keyboard
   users get a visible, on-brand ring on EVERY page (incl. live.html, which loads
   tokens.css but not styles.css) and on plain controls that would otherwise fall
   back to Water.css's amber outline. Per-screen rules (.primary-btn:focus-visible
   etc.) are more specific and still win where they set a richer ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}