/* Teleprompter token cascade (brocade, namespace: tp).
 *
 * Palette and scales ported from the design handoff (DRAFT v0.1,
 * design-export/handoff/tokens.css) into the layered structure the
 * TELE-022 flip established. Two layers, one-way references: raw
 * names what a value IS, semantic names what it is FOR. Components
 * consume ONLY semantic tokens via var() with literal fallbacks.
 *
 * LAYERED (thm-001): every token-defining rule lives in a declared
 * cascade layer. Runtime overrides (inline custom properties on the
 * document root) deliberately outrank every layer (thm-002).
 * The speaker-slot wiring at the bottom is scoped indirection, not
 * theme definition — themes override the slot tokens, which it reads.
 */

@layer tp-raw, tp-semantic, tp-theme;
/* tp-theme populates from the looks surface (lks-004): raw-layer
   swaps keyed by data-tp-theme on the root. Declared before themes
   exist so the layering can never be partial. */

/* ----- raw layer: the palette ----- */
@layer tp-raw {
  :root {
    /* night (surfaces) */
    --tp-raw-color-night-900: #0B0D10;
    --tp-raw-color-night-800: #0E1116;
    --tp-raw-color-night-700: #12161B;
    --tp-raw-color-night-600: #1A2027;

    /* mist (greys on night) */
    --tp-raw-color-mist-100: #F2F5F7;
    --tp-raw-color-mist-200: #EAEEF2;
    --tp-raw-color-mist-300: #DCE4EA;
    --tp-raw-color-mist-400: #C7D1D9;
    --tp-raw-color-mist-500: #AEBBC6;
    --tp-raw-color-mist-600: #8FA0AB;
    --tp-raw-color-mist-700: #76838F;
    --tp-raw-color-mist-800: #5C6873;
    --tp-raw-color-mist-900: #4A5560;

    /* hues */
    --tp-raw-color-cyan-400: #6BD9E7;
    --tp-raw-color-gold-300: #E9C87E;
    --tp-raw-color-mint-300: #9BDCAA;
    --tp-raw-color-orchid-300: #D2A8EE;
    --tp-raw-color-coral-300: #F2A28F;
    --tp-raw-color-periwinkle-300: #A9B8F5;
    --tp-raw-color-amber-400: #E5B36A;
    --tp-raw-color-green-300: #7FD99A;

    /* white alphas (lines, tints) */
    --tp-raw-color-white-a03: rgba(255,255,255,.035);
    --tp-raw-color-white-a05: rgba(255,255,255,.05);
    --tp-raw-color-white-a08: rgba(255,255,255,.08);
    --tp-raw-color-white-a12: rgba(255,255,255,.12);
    --tp-raw-color-white-a16: rgba(255,255,255,.16);
    --tp-raw-color-white-a30: rgba(255,255,255,.30);

    /* alphas / type / metrics */
    --tp-raw-alpha-32: 0.32;
    --tp-raw-font-hyperlegible: 'Atkinson Hyperlegible', sans-serif;
    --tp-raw-font-archivo: Archivo, system-ui, sans-serif;
    --tp-raw-font-plexmono: 'IBM Plex Mono', monospace;

    --tp-raw-size-40: 2.5rem;
    --tp-raw-leading-140: 1.4;
    --tp-raw-leading-160: 1.6;
  }
}

/* ----- semantic layer: the application ----- */
@layer tp-semantic {
  :root {
    /* stage & script */
    --tp-color-surface-base: var(--tp-raw-color-night-900, #0B0D10);
    --tp-color-script-base: var(--tp-raw-color-mist-200, #EAEEF2);

    /* Spoken rule (D-010 ruling, live since the design port): spoken
       text = its speaker's color at --tp-alpha-spoken. ONE derived
       rule, no per-speaker spoken variants; the token name survives
       from spk-003, now DERIVED. Single-speaker scripts resolve to
       script-base at alpha. */
    --tp-alpha-spoken: var(--tp-raw-alpha-32, 0.32);
    --tp-color-script-spoken: rgb(from
      var(--tp-color-speaker-current, var(--tp-color-script-base, #EAEEF2))
      r g b / var(--tp-alpha-spoken, 0.32));

    /* speaker slots (assigned by first appearance; 7th wraps) */
    --tp-color-speaker-1: var(--tp-raw-color-mist-200, #EAEEF2);
    --tp-color-speaker-2: var(--tp-raw-color-gold-300, #E9C87E);
    --tp-color-speaker-3: var(--tp-raw-color-mint-300, #9BDCAA);
    --tp-color-speaker-4: var(--tp-raw-color-orchid-300, #D2A8EE);
    --tp-color-speaker-5: var(--tp-raw-color-coral-300, #F2A28F);
    --tp-color-speaker-6: var(--tp-raw-color-periwinkle-300, #A9B8F5);

    /* live/voice accent — cyan retired from spoken words; chrome only */
    --tp-color-accent-live: var(--tp-raw-color-cyan-400, #6BD9E7);
    --tp-color-accent-live-tint: color-mix(in srgb,
      var(--tp-color-accent-live, #6BD9E7) 13%, transparent);
    --tp-color-accent-live-line: color-mix(in srgb,
      var(--tp-color-accent-live, #6BD9E7) 35%, transparent);

    /* voice.processing (privacy-meaningful) */
    --tp-color-processing-local: var(--tp-color-accent-live, #6BD9E7);
    --tp-color-processing-cloud: var(--tp-raw-color-amber-400, #E5B36A);
    --tp-color-processing-none: var(--tp-raw-color-mist-700, #76838F);

    /* editor */
    --tp-color-editor-dirty: var(--tp-raw-color-amber-400, #E5B36A);
    --tp-color-editor-source: var(--tp-raw-color-mist-400, #C7D1D9);
    --tp-color-editor-caret: var(--tp-color-accent-live, #6BD9E7);

    /* surfaces & lines */
    --tp-color-surface-panel: var(--tp-raw-color-night-700, #12161B);
    --tp-color-surface-sunken: var(--tp-raw-color-night-800, #0E1116);
    --tp-color-surface-raised: var(--tp-raw-color-night-600, #1A2027);
    --tp-color-line-hair: var(--tp-raw-color-white-a08, rgba(255,255,255,.08));
    --tp-color-line-strong: var(--tp-raw-color-white-a12, rgba(255,255,255,.12));
    --tp-color-line-control: var(--tp-raw-color-white-a16, rgba(255,255,255,.16));
    --tp-color-line-readline: var(--tp-raw-color-white-a30, rgba(255,255,255,.30));
    --tp-color-line-readline-far: var(--tp-raw-color-white-a12, rgba(255,255,255,.12));
    --tp-color-handle-idle: var(--tp-raw-color-white-a30, rgba(255,255,255,.30));

    /* UI text tiers */
    --tp-color-text-value: var(--tp-raw-color-mist-100, #F2F5F7);
    --tp-color-text-ui: var(--tp-raw-color-mist-400, #C7D1D9);
    --tp-color-text-ui-2: var(--tp-raw-color-mist-600, #8FA0AB);
    --tp-color-text-ui-dim: var(--tp-raw-color-mist-700, #76838F);
    --tp-color-text-ui-faint: var(--tp-raw-color-mist-800, #5C6873);

    /* chrome (existing consumer names; values ported) */
    --tp-color-chrome-bg: var(--tp-color-surface-panel, #12161B);
    --tp-color-chrome-fg: var(--tp-color-text-ui, #C7D1D9);
    --tp-color-chrome-control-bg: var(--tp-color-surface-raised, #1A2027);
    --tp-color-chrome-border: var(--tp-color-line-control, rgba(255,255,255,.16));
    --tp-color-chrome-overlay: color-mix(in srgb,
      var(--tp-color-surface-panel, #12161B) 90%, transparent);
    --tp-color-captions-fg: var(--tp-color-text-ui-2, #8FA0AB);

    /* type */
    --tp-font-script-base: var(--tp-raw-font-hyperlegible, sans-serif);
    --tp-font-chrome-base: var(--tp-raw-font-archivo, system-ui, sans-serif);
    --tp-font-mono: var(--tp-raw-font-plexmono, monospace);

    /* UI type scale (script size is OPERATOR STATE, never a token) */
    --tp-text-label: 9px;
    --tp-text-chip: 10px;
    --tp-text-meta: 11.5px;
    --tp-text-body: 13.5px;
    --tp-text-value: 15px;
    --tp-tracking-label: .14em;
    --tp-tracking-chip: .1em;

    /* space (4px base) */
    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 20px;
    --tp-space-6: 28px;

    /* radius */
    --tp-radius-chip: 6px;
    --tp-radius-field: 7px;
    --tp-radius-strip: 10px;
    --tp-radius-panel: 14px;
    --tp-radius-pill: 999px;

    /* existing consumer names; values ported to the design scales */
    --tp-size-script-font-base: var(--tp-raw-size-40, 2.5rem);
    --tp-size-script-leadin: 50vh;
    --tp-size-script-runout: 100vh;
    --tp-size-chrome-font: var(--tp-text-body, 13.5px);
    --tp-size-captions-font: var(--tp-text-body, 13.5px);
    --tp-size-chrome-gap: var(--tp-space-2, 8px);
    --tp-size-chrome-pad: var(--tp-space-3, 12px);
    --tp-size-chrome-offset: var(--tp-space-4, 16px);
    --tp-size-captions-offset: 5rem;
    --tp-size-captions-maxwidth: 70vw;
    --tp-size-bar-maxwidth: 92vw;
    --tp-size-control-slider: 4.5rem;
    --tp-size-control-slider-wide: 5.625rem;
    --tp-size-control-number: 3.5rem;
    --tp-border-chrome-radius: var(--tp-radius-field, 7px);
    --tp-border-pill-radius: var(--tp-radius-pill, 999px);
    --tp-border-hairline: 1px;
    --tp-type-leading-chrome: var(--tp-raw-leading-140, 1.4);
    --tp-type-leading-script: var(--tp-raw-leading-160, 1.6);

    /* design sizes */
    --tp-size-bar-h: 76px;
    --tp-size-drawer-w: 380px;
    --tp-control-play: 44px;
    --tp-control-track-h: 3px;
    --tp-control-track-h-mini: 2px;
    --tp-control-knob: 14px;
    --tp-control-knob-mini: 10px;
    --tp-control-row-gap: 8px;

    /* elevation & motion */
    --tp-shadow-panel: 0 14px 40px rgba(0,0,0,.5);
    --tp-shadow-drawer: -24px 0 48px rgba(0,0,0,.45);
    --tp-blur-panel: 12px;
    --tp-motion-panel-expand: 280ms cubic-bezier(.2,.8,.2,1);
    --tp-motion-fade-chrome: 240ms ease;
    --tp-motion-idle-delay: 3s;
  }
}

/* ------------------------------------------------------------
   Speaker slot wiring (design handoff mechanism; inert until the
   batch-4 parser stamps data-speaker-slot). Scoped indirection —
   token-reading, deliberately unlayered (thm-001 note). Words read
   the slot's color; spoken words read the derived spk-003 token.
   ------------------------------------------------------------ */
[data-seg]                { --tp-color-speaker-current: var(--tp-color-script-base, #EAEEF2); }
[data-speaker-slot="1"]   { --tp-color-speaker-current: var(--tp-color-speaker-1, #EAEEF2); }
[data-speaker-slot="2"]   { --tp-color-speaker-current: var(--tp-color-speaker-2, #E9C87E); }
[data-speaker-slot="3"]   { --tp-color-speaker-current: var(--tp-color-speaker-3, #9BDCAA); }
[data-speaker-slot="4"]   { --tp-color-speaker-current: var(--tp-color-speaker-4, #D2A8EE); }
[data-speaker-slot="5"]   { --tp-color-speaker-current: var(--tp-color-speaker-5, #F2A28F); }
[data-speaker-slot="6"]   { --tp-color-speaker-current: var(--tp-color-speaker-6, #A9B8F5); }

[data-word]         { color: var(--tp-color-speaker-current, var(--tp-color-script-base, #EAEEF2)); }
[data-word][spoken] { color: var(--tp-color-script-spoken, rgba(234, 238, 242, 0.32)); }

/* The 1e margin rail (spk-005): a 3px rounded rule in the left
   gutter of each attributed block, name tag above it — both in the
   speaker's slot color. Token-reading, unlayered. */
p[data-speaker-slot] { position: relative; }
p[data-speaker-slot]::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tp-space-4, 16px));
  top: var(--tp-space-1, 4px);
  bottom: var(--tp-space-1, 4px);
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb,
    var(--tp-color-speaker-current, var(--tp-color-script-base, #EAEEF2)) 50%, transparent);
}
p[data-speaker]::after {
  content: attr(data-speaker);
  position: absolute;
  left: calc(-1 * var(--tp-space-4, 16px) - var(--tp-space-2, 8px));
  top: var(--tp-space-1, 4px);
  transform: translateX(-100%);
  font-family: var(--tp-font-mono, monospace);
  font-size: var(--tp-text-label, 9px);
  font-weight: 600;
  letter-spacing: var(--tp-tracking-label, .14em);
  line-height: 1;
  color: var(--tp-color-speaker-current, var(--tp-color-script-base, #EAEEF2));
}