/* Runthrough interface tokens — the lit-acrylic language, as CSS.
   Source of truth is the Bar Lab (barlab.html, Lead preset) and docs/DESIGN-OVERHAUL.md.
   Rule: the brand pair says who we are (Action red, Selected yellow); every other colour
   says what is happening (Live, Done, Link, Note, Warn). Light is spent, not sprayed. */
:root {
  /* brand pair */
  --rt-yellow: #F5CE6E; --rt-mid: #F0A24A; --rt-red: #E1352F; --rt-pool: #FFD652; --rt-halo: #FF3010;
  --rt-ink-on-yellow: #1a0d05; --rt-ink-on-red: #fff4ea;
  --rt-radius: 4px; --rt-lean: -8deg;
  --rt-rim: inset 0 0 0 1px rgba(252,231,168,.42);
  --rt-glow-yellow: var(--rt-rim), 0 0 6px rgba(250,135,68,.55), 0 0 18px rgba(250,135,68,.28), 0 0 48px rgba(250,135,68,.12);
  --rt-glow-red:    var(--rt-rim), 0 0 6px rgba(227,53,45,.55), 0 0 18px rgba(227,53,45,.28), 0 0 48px rgba(227,53,45,.12);
  --rt-face-yellow: linear-gradient(to top, #fad261 0%, #f5ce6e 33%, #f5ce6e 100%);
  --rt-face-red:    linear-gradient(to top, #e85d38 0%, #e1352f 33%, #e1352f 100%);
  /* quieter forms of the same light, for rings and focus rather than lit bars */
  --rt-ring-yellow: inset 0 0 0 1px rgba(245,206,110,.9), 0 0 0 1px rgba(245,206,110,.35), 0 0 10px rgba(250,135,68,.35), 0 0 26px rgba(250,135,68,.14);
  --rt-ring-red:    inset 0 0 0 1px rgba(227,53,45,.9), 0 0 0 1px rgba(227,53,45,.3), 0 0 10px rgba(227,53,45,.35), 0 0 26px rgba(227,53,45,.14);
  --rt-focus:       inset 0 0 0 1px rgba(245,206,110,.75), 0 0 6px rgba(250,135,68,.45), 0 0 16px rgba(250,135,68,.22);
  /* state roles: face, halo, glow, lit face, soft wash */
  --rt-live: #3DDCB0; --rt-live-halo: #0FB8A8; --rt-live-soft: rgba(61,220,176,.14);
  --rt-glow-live: inset 0 0 0 1px rgba(168,239,219,.42), 0 0 6px rgba(40,204,172,.55), 0 0 18px rgba(40,204,172,.28), 0 0 48px rgba(40,204,172,.12);
  --rt-face-live: linear-gradient(to top, #55e0ba 0%, #3ddcb0 33%, #3ddcb0 100%);
  --rt-ok: #5FD97A; --rt-ok-halo: #1DB25A; --rt-ok-soft: rgba(95,217,122,.14);
  --rt-glow-ok: inset 0 0 0 1px rgba(183,238,195,.42), 0 0 6px rgba(65,199,108,.55), 0 0 18px rgba(65,199,108,.28), 0 0 48px rgba(65,199,108,.12);
  --rt-face-ok: linear-gradient(to top, #73de8b 0%, #5fd97a 33%, #5fd97a 100%);
  --rt-info: #5AA6F0; --rt-info-halo: #3A5FE8; --rt-info-soft: rgba(90,166,240,.14);
  --rt-glow-info: inset 0 0 0 1px rgba(181,215,248,.42), 0 0 6px rgba(76,134,236,.55), 0 0 18px rgba(76,134,236,.28), 0 0 48px rgba(76,134,236,.12);
  --rt-face-info: linear-gradient(to top, #6fb1f2 0%, #5aa6f0 33%, #5aa6f0 100%);
  --rt-note: #B48CFF; --rt-note-halo: #7A48FF; --rt-note-soft: rgba(180,140,255,.14);
  --rt-glow-note: inset 0 0 0 1px rgba(221,203,255,.42), 0 0 6px rgba(154,109,255,.55), 0 0 18px rgba(154,109,255,.28), 0 0 48px rgba(154,109,255,.12);
  --rt-face-note: linear-gradient(to top, #bd9aff 0%, #b48cff 33%, #b48cff 100%);
  --rt-warn: #F2B233; --rt-warn-halo: #FF6A12; --rt-warn-soft: rgba(242,178,51,.14);
  --rt-glow-warn: inset 0 0 0 1px rgba(249,220,163,.42), 0 0 6px rgba(248,146,36,.55), 0 0 18px rgba(248,146,36,.28), 0 0 48px rgba(248,146,36,.12);
  --rt-face-warn: linear-gradient(to top, #f4bc4d 0%, #f2b233 33%, #f2b233 100%);
  --rt-danger: #E1352F;

  /* the shell: warm by default, a brown-black that carries a little of the bars' heat.
     Ink (neutral) and charcoal (the old grey) are switches under Settings, Appearance. */
  --bg: #0A0908; --ground: #050403; --panel: #141210; --panel-2: #1b1916; --panel-3: #24211d; --rule: #2a2723; --rule-2: #393530;
  --ink: #F3EEE6; --ink-2: #cdc6ba; --muted: #8a8378;
  /* the editor's semantic hooks: Selected is the yellow, Action is styled separately */
  --accent: var(--rt-yellow); --accent-ink: var(--rt-ink-on-yellow); --accent-soft: rgba(245,206,110,.14);
  --ok: var(--rt-ok); --warn: var(--rt-warn);
  --shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.5);
}
html[data-ground="ink"] {
  --bg: #0B0B0C; --ground: #050506; --panel: #151517; --panel-2: #1c1c1f; --panel-3: #242428; --rule: #2a2a2f; --rule-2: #38383e;
  --ink: #F3EEE6; --ink-2: #c9c4bb; --muted: #86817a;
}
html[data-ground="charcoal"] {
  --bg: #17181c; --ground: #101115; --panel: #232429; --panel-2: #2b2c32; --panel-3: #34353c; --rule: #3a3b43; --rule-2: #46474f;
  --ink: #e9eaee; --ink-2: #c3c5cc; --muted: #868a94;
}
@keyframes rt-breathe { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .rt-breathe, .rt-breathe * { animation: none !important; } }