/* Our Episode — derived tokens.
   tokens.css is the brand handoff, kept byte-for-byte. The page specs (Our Episode Home / Viewing, CastBuilder,
   EpisodeTV .dc.html) also use a handful of values tokens.css doesn't name: they are named here, once, so no
   component anywhere carries a literal colour. scripts/check.mjs allows literals only in tokens.css and this file. */
:root {
  --ep-white: #fff;                                   /* text and icons on tomato */

  /* the room (dark pages) */
  --ep-page-top: #2c1a12;
  --ep-page-bottom: #170d08;
  --ep-page-dots: rgba(255, 200, 130, .07);
  --ep-page-bg:
    radial-gradient(var(--ep-page-dots) 2px, transparent 3px) 0 0 / 44px 44px,
    linear-gradient(var(--ep-page-top), var(--ep-page-bottom) 70%);
  --ep-header-bg: rgba(26, 15, 10, .92);
  --ep-line-on-dark: rgba(255, 244, 224, .1);          /* header / footer rules */
  --ep-hover-on-dark: rgba(255, 244, 224, .08);
  --ep-outline-on-dark: rgba(255, 244, 224, .35);      /* channel buttons, quiet outlines */
  --ep-locked-line: #5a4430;                          /* a locked channel's dashed border */
  --ep-status-amber-ring: rgba(240, 180, 60, .5);     /* "casting" status pill */
  --ep-status-live: #ff3b30;                          /* "on the air" dot */

  /* the player inside the TV's screen in full screen (the TV System kit, SitcomTVFullscreen "controls") */
  --ep-player-glass: rgba(26, 15, 10, .86);
  --ep-player-glass-ring: rgba(240, 180, 60, .35);
  --ep-player-glass-track: rgba(255, 244, 224, .2);
  --ep-player-glass-line: rgba(255, 244, 224, .5);
  --ep-player-glass-time: #e0cdae;

  /* the cast modal (Cast Modal design): a card's paper, an "out" card's dashed line, the dimmed face it covers */
  --ep-card-paper: #fffaf0;
  --ep-line-out: rgba(34, 20, 14, .25);
  --ep-segment-line: rgba(34, 20, 14, .35);
  --ep-face-out: rgba(18, 10, 6, .58);
  --ep-ring-out: rgba(255, 244, 224, .55);
  --ep-hot-ring: rgba(240, 180, 60, .55);
  --ep-hot-glow: rgba(240, 180, 60, .6);
  --ep-focus-tomato: rgba(200, 48, 44, .18);

  /* cream surfaces */
  --ep-track: #e8d6b8;                                /* progress tracks, player timeline */
  --ep-row-active: #fff9ee;                           /* the cast row being drawn */
  --ep-line-on-cream: rgba(34, 20, 14, .12);          /* rules inside cards and menus */
  --ep-hover-on-cream: rgba(34, 20, 14, .08);
  --ep-danger-tint: rgba(200, 48, 44, .1);
  --ep-danger-wash: rgba(200, 48, 44, .06);
  --ep-mustard-hover: #f6c25a;
  --ep-disabled-bg: #e3d3b6;
  --ep-disabled-fg: #8a7a62;
  --ep-disabled-line: #b9a88c;
  --ep-disabled-ink: #7a6a54;

  /* characters (Our Episode Characters): the warm backdrop a drawing stands on, drawing / empty states */
  --ep-stage: #ecdcbc;
  --ep-stage-floor: rgba(106, 58, 31, .22);
  --ep-stage-bg: radial-gradient(ellipse 60% 14% at 50% 92%, var(--ep-stage-floor), transparent 70%), var(--ep-stage);
  --ep-stage-stripes: repeating-linear-gradient(135deg, rgba(34, 20, 14, .04) 0 10px, transparent 10px 20px);
  --ep-amber-ink: #7a5a12;                            /* "Drawing · 2 of 4 poses" */
  --ep-empty-line: #cdb994;                           /* a pose not drawn yet */
  --ep-add-line: rgba(255, 244, 224, .4);             /* the dashed "Add someone" card */
  --ep-add-hover: rgba(240, 180, 60, .06);

  /* speech bubbles (bubbles.css): the TV sets this from its screen width; 1 = the spec's 760px TV */
  --ep-bubble-scale: 1;

  /* overlays */
  --ep-scrim: rgba(18, 10, 6, .72);
  --ep-scrim-soft: rgba(18, 10, 6, .38);             /* under a drawer: the show stays visible */
  --ep-shadow-soft: 0 24px 50px -24px rgba(0, 0, 0, .7);

  /* layout */
  --ep-header-h: 77px;                                /* 14px + 48px lockup + 14px + 1px rule */
  --ep-gutter: clamp(16px, 3vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ep-dur-press: 1ms; --ep-dur-ui: 1ms; --ep-dur-screen: 1ms; }
}