/* Four Photoshop-style brightness themes — Darkest / Dark / Medium / Light.
 *
 * Each theme overrides:
 *   - the neutral ladder (backgrounds, text, borders) from design-tokens.css
 *   - elevation tokens (--shadow-card, --shadow-modal, --highlight-top)
 *   - for the Light theme only: accents, since bright gold/cyan lose contrast
 *     on near-white grounds.
 *
 * Elevation strategy varies per theme. Dark themes lean on bg-elevated
 * luminance + a subliminal top-edge highlight; drop-shadow is quiet since
 * black-on-black reads poorly. Medium lacks the contrast for dark shadow so
 * the highlight does more work. Light uses classic drop-shadow, no highlight.
 *
 * TODO: fold these palettes into DESIGN.md under a `themes:` section so
 * they flow through the same export pipeline as the base tokens.
 */

/* ═══════════════════════════════════════════════════════════
 * Theme 1 — Darkest (matches the default :root in design-tokens.css).
 * Defined here explicitly so the file reads as a single reference.
 * ═══════════════════════════════════════════════════════════ */
.theme-darkest {
  --bg-root: #08080a;
  --bg-canvas: #06060a;
  --bg-surface: #111114;
  --bg-card: #131316;
  --bg-elevated: #1a1a1f;
  --bg-rail: #0a0a0c;
  --bg-topbar: #0e0e11;

  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #8a8a92;
  --text-dim: #828289;

  --border-subtle: #141418;
  --border: #1a1a1f;
  --border-accent: #2a2a31;
  --border-bright: #3f3f46;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-modal:
    0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.55);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════
 * Theme 2 — Dark. One step lighter. Comfortable for long sessions.
 * ═══════════════════════════════════════════════════════════ */
.theme-dark {
  --bg-root: #1c1c22;
  --bg-canvas: #1a1a20;
  --bg-surface: #26262c;
  --bg-card: #2a2a30;
  --bg-elevated: #34343c;
  --bg-rail: #1e1e24;
  --bg-topbar: #222228;

  --text-primary: #e4e4e7;
  --text-secondary: #b4b4bc;
  --text-muted: #76767e;
  --text-dim: #55555b;

  --border-subtle: #26262c;
  --border: #34343c;
  --border-accent: #42424a;
  --border-bright: #55555d;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal:
    0 4px 14px rgba(0, 0, 0, 0.45), 0 16px 44px rgba(0, 0, 0, 0.5);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════
 * Theme 3 — Medium. Mid-gray studio mode. Wider tonal spread so
 * cards separate cleanly from canvas; highlight does more of the
 * depth work since dark drop-shadow is largely invisible on gray.
 * ═══════════════════════════════════════════════════════════ */
.theme-medium {
  --bg-root: #2c2c32;
  --bg-canvas: #28282e;
  --bg-surface: #404048;
  --bg-card: #535360;
  --bg-elevated: #63636c;
  --bg-rail: #2a2a30;
  --bg-topbar: #34343a;

  --text-primary: #f4f4f7;
  --text-secondary: #d4d4d8;
  --text-muted: #b4b4bc;
  --text-dim: #888890;

  --border-subtle: #3a3a42;
  --border: #505058;
  --border-accent: #626268;
  --border-bright: #7a7a80;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-modal:
    0 4px 14px rgba(0, 0, 0, 0.25), 0 12px 40px rgba(0, 0, 0, 0.32);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════
 * Theme 4 — Light. Near-white surface. Accents deepen for contrast.
 * Classic soft drop-shadow; no simulated highlight on bright grounds.
 * ═══════════════════════════════════════════════════════════ */
.theme-light {
  --bg-root: #dcdce0;
  --bg-canvas: #e4e4e8;
  --bg-surface: #ededf1;
  --bg-card: #ffffff;
  --bg-elevated: #f4f4f7;
  --bg-rail: #d0d0d4;
  --bg-topbar: #dcdce0;

  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --text-dim: #a1a1aa;

  --border-subtle: #e4e4e7;
  --border: #d4d4d8;
  --border-accent: #b0b0b5;
  --border-bright: #888890;

  /* Accent deepens — keeps meaning while reaching WCAG AA on white */
  --accent: #a86e00;
  --accent-bright: #b87b05;
  --accent-ink: #ffffff;
  --wire: #0e7e9c;

  --type-character: var(--accent);
  --type-scene: var(--wire);
  --type-place: #0f7d70;
  --type-object: #6d28d9;
  --type-design: #be1336;
  --type-audio: #7c2ad6;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-modal:
    0 4px 16px rgba(0, 0, 0, 0.1), 0 16px 48px rgba(0, 0, 0, 0.14);
  --highlight-top: none;
}