/* Ring design tokens — the single source of colour, depth, and stacking.
   ADR 0010 P1.

   The palette is not new. Session Theatre (ADR 0009) already shipped a
   complete, self-consistent dark system in a private `#theatre-root` block
   that shadowed the light tokens here — which is why the rail and topbar
   rendered white around a near-black view (ADR 0010 F8). This file promotes
   Theatre's palette to `:root` and theatre.css now aliases back to it, so
   there is one source of truth instead of two.

   Rules for anything that consumes these:
     • No literal `rgb()` / hex in component CSS. Use a token.
     • No `var(--x, #fallback)` fallbacks. A missing token is a bug to fix,
       not to paper over — the fallbacks were how the dark-on-light mismatch
       stayed invisible for so long.
     • No literal `z-index`. Use the ladder at the bottom of this file. */

:root {
  /* ---- Ground ------------------------------------------------------
     Blue-biased, never pure black. Three depths: the page, a surface on
     it, and a surface raised off that. */
  --bg:            #12151c;
  --bg-card:       #181c25;
  --bg-subtle:     #1e2430;
  --bg-inset:      #0e1117;

  --border:        #232936;
  --border-soft:   #1c212b;
  --border-strong: #2e3646;

  /* ---- Ink --------------------------------------------------------- */
  --text:          #e6e9ef;
  --text-muted:    #8b93a5;
  --text-subtle:   #5c6474;

  /* ---- Status ramp -------------------------------------------------
     The ONE vocabulary for "how is this thing doing". Replaces the six
     that existed before (.ldot / .env .dot / .dep-lamp / .svc-dot-bullet
     / .status-dot / .rail-dot). Semantic, and deliberately separate from
     the brand accent below — health must never be confused with chrome. */
  --sig-ok:    #57c98a;
  --sig-busy:  #5b9cf8;
  --sig-warn:  #ffb340;
  --sig-bad:   #e8607a;
  --sig-idle:  #5c6474;

  --sig-ok-bg:   rgba(87,201,138,.12);
  --sig-busy-bg: rgba(91,156,248,.12);
  --sig-warn-bg: rgba(255,179,64,.13);
  --sig-bad-bg:  rgba(232,96,122,.13);
  --sig-idle-bg: rgba(92,100,116,.12);

  /* Glow is a state channel (ADR 0010 D3): a thing glows exactly when it
     is live or unattended, and the glow goes out on acknowledgement.
     Retained under prefers-reduced-motion — colour and luminance carry the
     signal without movement. */
  --sig-ok-glow:   rgba(87,201,138,.55);
  --sig-busy-glow: rgba(91,156,248,.55);
  --sig-warn-glow: rgba(255,179,64,.60);
  --sig-bad-glow:  rgba(232,96,122,.62);

  /* ---- Brand accent ------------------------------------------------
     Brass. The Ring. Cooler and darker than --sig-warn so an accented
     control never reads as a warning. Used for active nav, primary
     buttons, links, focus. Nothing else. */
  --accent-brand:       #c8a24c;
  --accent-brand-hover: #d9b566;
  --accent-brand-ink:   #14100a;   /* text ON a brass fill */
  /* Text on ANY bright fill (brass, red, green). On a dark scale the ramp
     colours are light, so white-on-fill drops to ~2.9:1 — near-black wins. */
  --ink-on-bright:      #12100c;
  --accent-brand-bg:    rgba(200,162,76,.10);
  --accent-brand-glow:  rgba(200,162,76,.45);

  /* ---- Legacy aliases ----------------------------------------------
     Every name the existing components already reference, remapped onto
     the ramp above. This is what makes P1 a CSS-only change: no JS and no
     markup has to move for the app to go dark. New code should prefer the
     semantic names; these stay until the last consumer is migrated. */
  --primary:        var(--accent-brand);
  --primary-hover:  var(--accent-brand-hover);
  --primary-bg:     var(--accent-brand-bg);
  --accent:         var(--sig-ok);
  --accent-hover:   #6fd6a0;
  --warning:        var(--sig-warn);
  --danger:         var(--sig-bad);
  --danger-hover:   #f07a90;
  --success-bg:     var(--sig-ok-bg);
  --warning-bg:     var(--sig-warn-bg);
  --danger-bg:      var(--sig-bad-bg);

  /* ---- Shape ------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Dark ground needs deeper, softer shadows than the light theme's. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow:    0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.58);

  /* ---- Type -------------------------------------------------------- */
  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Stacking ladder ---------------------------------------------
     Declared, ordered, and total. Before this, fourteen ad-hoc z-index
     values across three files put the rail flyout (300) above the modal
     card (100) and its backdrop (99) — hovering the left edge slid the nav
     rail over an open modal (ADR 0010 F2). Nothing may use a literal
     z-index; if something needs a new layer it goes in this list. */
  --z-base:    0;
  --z-sticky:  100;   /* topbar, tab bar */
  --z-dock:    200;   /* signal dock, side panels */
  --z-flyout:  300;   /* rail hover flyout */
  --z-modal:      400;   /* backdrop */
  --z-modal-card: 401;   /* card — explicit, so it does not rely on DOM order */
  --z-toast:   500;
  --z-palette: 600;
}