/**
 * User Themes — Dark, Light & Greyscale
 * =======================================
 * Dark theme (default), light theme, greyscale theme, and fantasy pack.
 */

/*
 * Terminal D&D User Theme Presets
 * ================================
 * Theme Categories:
 *   Standard: Dark, Light, Greyscale
 *   Fantasy: Parchment, Dungeon, Arcane
 *   High Contrast: Solarized Dark, Solarized Light, Nord, Dracula
 *
 * Loaded after _tokens.css to override default values.
 * Applied via html[data-theme="X"] selectors.
 */

/* ========================================
 * DARK THEME (Default)
 * ======================================== */
html[data-theme="dark"] {
  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-bg-elevated: #404040;
  --color-bg-hover: #4a4a4a;

  /* Text Colors — the SAME trio as tokens/_colors.css :root (#20157). This block outranks
   * :root and is the default preset, so a value that differs here is the one players see. */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #c0c0c0;
  --color-text-muted: #ababab;
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - Slightly muted */
  --color-accent-primary: #5a9fd8;
  --color-accent-secondary: #8ab56e;
  --color-accent-warning: #d4b06e;
  --color-accent-error: #cf6068;
  --color-accent-purple: #b56cc8;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #61afef;

  /* Semantic Colors */
  --color-hp-full: #8ab56e;
  --color-hp-mid: #d4b06e;
  --color-hp-low: #cf6068;
  --color-xp: #5a9fd8;
  --color-gold: #e8c44a;
  --color-error: #cf6068;
  --color-error-bg: rgba(207, 96, 104, 0.15);
  --color-error-muted: rgba(207, 96, 104, 0.3);

  /* Status Colors */
  --color-success-bg: rgba(138, 181, 110, 0.15);
  --color-success-text: #8ab56e;
  --color-warning-bg: rgba(212, 176, 110, 0.15);
  --color-warning-text: #d4b06e;
  --color-info-bg: rgba(90, 159, 216, 0.15);
  --color-info-text: #5a9fd8;
  --color-accent-bg: rgba(90, 159, 216, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 8px rgba(90, 159, 216, 0.3);

  /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #1a1a1a;
  --scrollbar-thumb-color: #767676;
  --scrollbar-thumb-hover-color: #797979;
}

/* ========================================
 * LIGHT THEME
 * ======================================== */
html[data-theme="light"] {
  /* Background Colors */
  --color-bg-primary: #f8f9fa;
  --color-bg-secondary: #e9ecef;
  --color-bg-tertiary: #dee2e6;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #ced4da;

  /* Text Colors */
  --color-text-primary: #212529;
  --color-text-secondary: #495057;
  --color-text-muted: #5c636a;    /* #18279: was #868e96 — 2.55:1 on the system row's #dee2e6 */
  --color-text-inverse: #f8f9fa;

  /* Accent Colors - Darker for contrast on light bg */
  --color-accent-primary: #2563eb;
  --color-accent-secondary: #15803d; /* #18279: was #16a34a — player rows read 3.13:1 */
  --color-accent-warning: #ca8a04;
  --color-accent-error: #dc2626;
  --color-accent-purple: #9333ea;

  /* Border Colors */
  --color-border-default: #ced4da;
  --color-border-subtle: #dee2e6;
  --color-border-focus: #2563eb;

  /* Semantic Colors */
  --color-hp-full: #16a34a;
  --color-hp-mid: #ca8a04;
  --color-hp-low: #dc2626;
  --color-xp: #2563eb;
  --color-gold: #b8860b;

  /* Status Colors */
  --color-success-bg: rgba(22, 163, 74, 0.1);
  --color-success-text: #16a34a;
  --color-warning-bg: rgba(202, 138, 4, 0.1);
  --color-warning-text: #ca8a04;
  --color-info-bg: rgba(37, 99, 235, 0.1);
  --color-info-text: #2563eb;
  --color-accent-bg: rgba(37, 99, 235, 0.08);

  /* Shadows - Lighter for light theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 12px rgba(37, 99, 235, 0.3);

  /* Scrollbar — thumb darkened for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #f8f9fa;
  --scrollbar-thumb-color: #82888e;
  --scrollbar-thumb-hover-color: #616971;

  /* Narrative + channel grounds (#18279). The :root defaults are dark-page
   * values: parchment DM text (1.29:1 here) and solid near-black channel
   * grounds that painted Behind-the-scenes / OOC rows as dark bars. Guarded
   * by spec/assets/light_theme_narrative_contrast_18279_spec.rb. */
  --color-dm-text: #4a3520;
  --composer-field-bg: var(--color-bg-elevated);
  --color-channel-adventure: #166534;
  --color-channel-adventure-bg: #e7f4ea;
  --color-channel-ooc: #1d4ed8;
  --color-channel-ooc-bg: #e6eefb;
  --color-channel-dm: #92400e;
  --color-channel-dm-bg: #fbf1d9;
  --color-channel-creative: #7e22ce;
  --color-channel-creative-bg: #f2e8fb;

  /* Side-panel tab strip (#18301): the :root default is the near-black
   * --surface-darker. Labels keep --color-text-muted (5.14:1 here); the
   * selected pill is a raised surface with a deeper blue (6.70:1). */
  --tab-strip-bg: var(--color-bg-secondary);
  --tab-strip-active-bg: var(--color-bg-elevated);
  --tab-strip-active-text: #1d4ed8;

  /* Action dock + contextual chips chrome (#18302). :root carries the dark
   * page's brass/parchment and white-alpha borders; here every label is AA
   * and every chip outline >= 3:1 on the sheet's grounds. */
  --dock-label: var(--color-text-muted);
  --dock-accent: var(--color-channel-dm);
  --focus-ring-color: var(--color-border-focus); /* #20158: the ONE focus ring (tokens/_play_accents.css) — gold is under 3:1 here */
  --dock-divider: var(--color-border-default);
  --dock-divider-faint: var(--color-border-subtle);
  --dock-chip-bg: var(--color-bg-elevated);
  --dock-chip-bg-hover: var(--color-bg-tertiary);
  --dock-chip-border: var(--color-border-strong);
  --dock-suggest-border: var(--color-border-strong);
  --dock-accent-border: var(--dock-accent);
  --dock-accent-border-strong: var(--dock-accent);

  /* Beat-control bar (#18512) — the :root defaults are the dark page's accent scale; here the label is 6.49:1 on its fill (4.86:1 hovered) and the outline 3.85:1 on the page. */
  --beat-control-fg: #1e4fa0;
  --beat-control-emphasis: #2563eb;
  --beat-control-border: #5b7fb8;
  --beat-control-wash: color-mix(in srgb, var(--beat-control-emphasis) 10%, transparent);
}

/* ========================================
 * GREYSCALE THEME
 * True monochrome - NO color whatsoever
 * Uses CSS filter to force ALL colors to greyscale
 * ======================================== */
html[data-theme="greyscale"] {
  /* Force everything to greyscale via filter */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);

  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-bg-tertiary: #3a3a3a;
  --color-bg-elevated: #444444;
  --color-bg-hover: #4a4a4a;

  /* Text Colors */
  --color-text-primary: #d0d0d0;
  --color-text-secondary: #909090;
  --color-text-muted: #606060;
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - All greyscale */
  --color-accent-primary: #a0a0a0;
  --color-accent-secondary: #b0b0b0;
  --color-accent-warning: #c0c0c0;
  --color-accent-error: #808080;
  --color-accent-purple: #9a9a9a;

  /* Accent Aliases - Force greyscale */
  --color-accent-blue: #a0a0a0;
  --color-accent-green: #b0b0b0;
  --color-accent-yellow: #c0c0c0;
  --color-accent-red: #808080;
  --color-accent-gold: #c0c0c0;
  --color-accent: #a0a0a0;
  --color-accent-light: #c0c0c0;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #a0a0a0;

  /* Semantic Colors */
  --color-hp-full: #c0c0c0;
  --color-hp-mid: #909090;
  --color-hp-low: #606060;
  --color-xp: #a0a0a0;
  --color-gold: #d0d0d0;

  /* Status Colors */
  --color-success-bg: rgba(176, 176, 176, 0.15);
  --color-success-text: #b0b0b0;
  --color-warning-bg: rgba(192, 192, 192, 0.15);
  --color-warning-text: #c0c0c0;
  --color-info-bg: rgba(160, 160, 160, 0.15);
  --color-info-text: #a0a0a0;
  --color-accent-bg: rgba(160, 160, 160, 0.1);

  /* Entry/Log Colors - All greyscale */
  --color-entry-dm: #9a9a9a;
  --color-entry-player: #a0a0a0;
  --color-entry-system: #c0c0c0;
  --color-entry-error: #808080;
  --color-entry-roll: #a0a0a0;
  --color-entry-combat: #808080;
  --color-entry-npc: #9a9a9a;
  --color-entry-item: #c0c0c0;
  --color-entry-location: #b0b0b0;

  /* Split Divider */
  --split-divider-hover-color: #a0a0a0;

  /* Legacy Aliases */
  --accent-primary: #a0a0a0;
  --accent-secondary: #b0b0b0;
  --accent-warning: #c0c0c0;
  --accent-error: #808080;
  --accent-purple: #9a9a9a;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 12px rgba(160, 160, 160, 0.3);

  /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #1a1a1a;
  --scrollbar-thumb-color: #727272;
  --scrollbar-thumb-hover-color: #7c7c7c;
}

/* ========================================
 * FANTASY PACK
 * ======================================== */

/* ----------------------------------------
 * PARCHMENT THEME
 * Warm, aged paper feel - perfect for reading
 * ---------------------------------------- */
html[data-theme="parchment"] {
  /* Background Colors - Warm cream/beige */
  --color-bg-primary: #f4e8d1;
  --color-bg-secondary: #e8dcc6;
  --color-bg-tertiary: #dcd0ba;
  --color-bg-elevated: #faf4e8;
  --color-bg-hover: #d0c4ae;

  /* Text Colors - Rich brown tones */
  --color-text-primary: #3d2914;
  --color-text-secondary: #5c4a32;
  --color-text-muted: #8b7355;
  --color-text-inverse: #f4e8d1;

  /* Accent Colors - Burgundy and forest */
  --color-accent-primary: #8b2942;
  --color-accent-secondary: #2d5a27;
  --color-accent-warning: #b8860b;
  --color-accent-error: #a52a2a;
  --color-accent-purple: #6b3a6b;

  /* Border Colors */
  --color-border-default: #c4b89c;
  --color-border-subtle: #d4c8ac;
  --color-border-focus: #8b2942;

  /* Semantic Colors */
  --color-hp-full: #2d5a27;
  --color-hp-mid: #b8860b;
  --color-hp-low: #a52a2a;
  --color-xp: #8b2942;
  --color-gold: #8b7500;

  /* Status Colors */
  --color-success-bg: rgba(45, 90, 39, 0.12);
  --color-success-text: #2d5a27;
  --color-warning-bg: rgba(184, 134, 11, 0.12);
  --color-warning-text: #8b6914;
  --color-info-bg: rgba(139, 41, 66, 0.1);
  --color-info-text: #8b2942;
  --color-accent-bg: rgba(139, 41, 66, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(61, 41, 20, 0.1);
  --shadow-md: 0 4px 8px rgba(61, 41, 20, 0.12);
  --shadow-lg: 0 8px 16px rgba(61, 41, 20, 0.15);
  --shadow-xl: 0 12px 24px rgba(61, 41, 20, 0.2);
  --shadow-glow: 0 0 12px rgba(139, 41, 66, 0.25);

  /* Scrollbar (#9846): track corrected from #e8dcc6 (== --color-bg-secondary,
   * an outlier vs. every other theme's track == --color-bg-primary pattern —
   * that mismatch would have collided with the panel-background fix in
   * organisms/creator_studio/_base.css) to --color-bg-primary's own value,
   * matching every sibling theme. Thumb darkened for WCAG >=3:1 against track. */
  --scrollbar-track-color: #f4e8d1;
  --scrollbar-thumb-color: #7c7058;
  --scrollbar-thumb-hover-color: #6c6048;

  /* Narrative + channel grounds (#18279) — see the light preset above. */
  --color-dm-text: #3d2914;
  --composer-field-bg: var(--color-bg-elevated);
  --color-channel-adventure: #2d5a27;
  --color-channel-adventure-bg: #e6e6c8;
  --color-channel-ooc: #1e3a8a;
  --color-channel-ooc-bg: #e3e2d6;
  --color-channel-dm: #7a3509;
  --color-channel-dm-bg: #f3dfb6;
  --color-channel-creative: #5b2180;
  --color-channel-creative-bg: #ebdcd6;

  /* Side-panel tab strip (#18301) — see the light preset above. Parchment's
   * muted ink is 3.31:1 on its secondary ground, so labels take the
   * secondary ink (6.24:1); the selected pill keeps the burgundy accent
   * (named explicitly since #20139 moved the dark default to the gold). */
  --tab-strip-bg: var(--color-bg-secondary);
  --tab-strip-text: var(--color-text-secondary);
  --tab-strip-active-bg: var(--color-bg-elevated);
  --tab-strip-active-text: var(--color-accent-primary);

  /* Action dock + contextual chips chrome (#18302) — see the light preset.
   * Labels take the secondary ink for the same reason as the tab strip. */
  --dock-label: var(--color-text-secondary);
  --dock-accent: var(--color-channel-dm);
  --focus-ring-color: var(--color-border-focus); /* #20158: the ONE focus ring (tokens/_play_accents.css) — gold is under 3:1 here */
  --dock-divider: var(--color-border-default);
  --dock-divider-faint: var(--color-border-subtle);
  --dock-chip-bg: var(--color-bg-elevated);
  --dock-chip-bg-hover: var(--color-bg-tertiary);
  --dock-chip-border: var(--color-text-muted);
  --dock-suggest-border: var(--color-text-muted);
  --dock-accent-border: var(--dock-accent);
  --dock-accent-border-strong: var(--dock-accent);

  /* Beat-control bar (#18512) — see the light preset; label 6.50:1 on its fill (4.85:1 hovered), outline 3.68:1 on the page. */
  --beat-control-fg: #1e4a7a;
  --beat-control-emphasis: #2c5f94;
  --beat-control-border: #5a7a9c;
  --beat-control-wash: color-mix(in srgb, var(--beat-control-emphasis) 10%, transparent);
}

/* ----------------------------------------
 * DUNGEON THEME
 * Deep stone grey with torch-lit warmth
 * ---------------------------------------- */
html[data-theme="dungeon"] {
  /* Background Colors - Stone grey */
  --color-bg-primary: #1c1c1e;
  --color-bg-secondary: #2c2c30;
  --color-bg-tertiary: #3c3c42;
  --color-bg-elevated: #44444a;
  --color-bg-hover: #4c4c54;

  /* Text Colors - Warm grey */
  --color-text-primary: #d4cfc5;
  --color-text-secondary: #a09a90;
  --color-text-muted: #6a665e;
  --color-text-inverse: #1c1c1e;

  /* Accent Colors - Torch/amber tones */
  --color-accent-primary: #e5a04a;
  --color-accent-secondary: #7a9e5a;
  --color-accent-warning: #d4a84a;
  --color-accent-error: #c45a4a;
  --color-accent-purple: #9a7abc;

  /* Border Colors */
  --color-border-default: #4a4a50;
  --color-border-subtle: #3a3a40;
  --color-border-focus: #e5a04a;

  /* Semantic Colors */
  --color-hp-full: #7a9e5a;
  --color-hp-mid: #d4a84a;
  --color-hp-low: #c45a4a;
  --color-xp: #e5a04a;
  --color-gold: #ffc34a;

  /* Status Colors */
  --color-success-bg: rgba(122, 158, 90, 0.15);
  --color-success-text: #7a9e5a;
  --color-warning-bg: rgba(212, 168, 74, 0.15);
  --color-warning-text: #d4a84a;
  --color-info-bg: rgba(229, 160, 74, 0.12);
  --color-info-text: #e5a04a;
  --color-accent-bg: rgba(229, 160, 74, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 16px rgba(229, 160, 74, 0.35);

  /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #1c1c1e;
  --scrollbar-thumb-color: #727278;
  --scrollbar-thumb-hover-color: #828288;
}

/* ----------------------------------------
 * ARCANE THEME
 * Mystical purple with magical glow
 * ---------------------------------------- */
html[data-theme="arcane"] {
  /* Background Colors - Deep purple/indigo */
  --color-bg-primary: #12101a;
  --color-bg-secondary: #1e1a2e;
  --color-bg-tertiary: #2a2640;
  --color-bg-elevated: #342e4a;
  --color-bg-hover: #3e3854;

  /* Text Colors - Soft lavender */
  --color-text-primary: #e0daf0;
  --color-text-secondary: #a8a0c0;
  --color-text-muted: #6a6480;
  --color-text-inverse: #12101a;

  /* Accent Colors - Magical purple/cyan */
  --color-accent-primary: #b366ff;
  --color-accent-secondary: #66ffcc;
  --color-accent-warning: #ffb366;
  --color-accent-error: #ff6688;
  --color-accent-purple: #cc66ff;

  /* Border Colors */
  --color-border-default: #3a3450;
  --color-border-subtle: #2a2640;
  --color-border-focus: #b366ff;

  /* Semantic Colors */
  --color-hp-full: #66ffcc;
  --color-hp-mid: #ffb366;
  --color-hp-low: #ff6688;
  --color-xp: #b366ff;
  --color-gold: #ffd966;

  /* Status Colors */
  --color-success-bg: rgba(102, 255, 204, 0.12);
  --color-success-text: #66ffcc;
  --color-warning-bg: rgba(255, 179, 102, 0.12);
  --color-warning-text: #ffb366;
  --color-info-bg: rgba(179, 102, 255, 0.12);
  --color-info-text: #b366ff;
  --color-accent-bg: rgba(179, 102, 255, 0.1);

  /* Shadows - Purple glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(179, 102, 255, 0.5);

  /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #12101a;
  --scrollbar-thumb-color: #726c88;
  --scrollbar-thumb-hover-color: #827c98;
}
/**
 * User Themes — High Contrast & Retro
 * =====================================
 * High contrast accessibility pack and retro CRT pack.
 */


/* ========================================
 * HIGH CONTRAST PACK
 * ======================================== */

/* ----------------------------------------
 * SOLARIZED DARK THEME
 * Classic Solarized dark color scheme
 * ---------------------------------------- */
html[data-theme="solarized-dark"] {
  /* Background Colors */
  --color-bg-primary: #002b36;
  --color-bg-secondary: #073642;
  --color-bg-tertiary: #094552;
  --color-bg-elevated: #0b5262;
  --color-bg-hover: #0d5f72;

  /* Text Colors */
  --color-text-primary: #839496;
  --color-text-secondary: #657b83;
  --color-text-muted: #586e75;
  --color-text-inverse: #002b36;

  /* Accent Colors - Solarized palette */
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #859900;
  --color-accent-warning: #b58900;
  --color-accent-error: #dc322f;
  --color-accent-purple: #6c71c4;

  /* Border Colors */
  --color-border-default: #094552;
  --color-border-subtle: #073642;
  --color-border-focus: #268bd2;

  /* Semantic Colors */
  --color-hp-full: #859900;
  --color-hp-mid: #b58900;
  --color-hp-low: #dc322f;
  --color-xp: #268bd2;
  --color-gold: #b58900;
  /* #20158: the ONE focus ring reads the world gold, and base0 yellow is
   * 2.73:1 on this preset's raised ground (#0b5262). A brighter yellow of the
   * same hue clears 3:1 on all four grounds (4.33:1 at worst). */
  --focus-ring-color: #e0b000;

  /* Status Colors */
  --color-success-bg: rgba(133, 153, 0, 0.15);
  --color-success-text: #859900;
  --color-warning-bg: rgba(181, 137, 0, 0.15);
  --color-warning-text: #b58900;
  --color-info-bg: rgba(38, 139, 210, 0.15);
  --color-info-text: #268bd2;
  --color-accent-bg: rgba(38, 139, 210, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 12px rgba(38, 139, 210, 0.4);

  /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
  --scrollbar-track-color: #002b36;
  --scrollbar-thumb-color: #4b8794;
  --scrollbar-thumb-hover-color: #4d94a4;

  /* Toasts (#20164): base0 text is 2.77:1 on the elevated #0b5262, so the
   * toast sits on base03 instead (4.75:1). */
  --toast-surface: var(--color-bg-primary);
}

/* ----------------------------------------
 * SOLARIZED LIGHT THEME
 * Classic Solarized light color scheme
 * ---------------------------------------- */
html[data-theme="solarized-light"] {
  /* Background Colors */
  --color-bg-primary: #fdf6e3;
  --color-bg-secondary: #eee8d5;
  --color-bg-tertiary: #e4dec8;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #d9d3bb;

  /* Text Colors */
  --color-text-primary: #657b83;
  --color-text-secondary: #839496;
  --color-text-muted: #93a1a1;
  --color-text-inverse: #fdf6e3;

  /* Accent Colors - Solarized palette */
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #859900;
  --color-accent-warning: #b58900;
  --color-accent-error: #dc322f;
  --color-accent-purple: #6c71c4;

  /* Border Colors */
  --color-border-default: #d9d3bb;
  --color-border-subtle: #eee8d5;
  --color-border-focus: #268bd2;

  /* Semantic Colors */
  --color-hp-full: #859900;
  --color-hp-mid: #b58900;
  --color-hp-low: #dc322f;
  --color-xp: #268bd2;
  --color-gold: #b58900;

  /* Status Colors */
  --color-success-bg: rgba(133, 153, 0, 0.1);
  --color-success-text: #859900;
  --color-warning-bg: rgba(181, 137, 0, 0.1);
  --color-warning-text: #b58900;
  --color-info-bg: rgba(38, 139, 210, 0.1);
  --color-info-text: #268bd2;
  --color-accent-bg: rgba(38, 139, 210, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 12px rgba(38, 139, 210, 0.25);

  /* Scrollbar */
  --scrollbar-track-color: #fdf6e3;
  --scrollbar-thumb-color: #d9d3bb;
  --scrollbar-thumb-hover-color: #c9c3ab;

  /* Narrative + channel grounds (#18279) — see the light preset in _base.css.
   * Solarized's own base00 body text (#657b83) is 4.13:1 on base3 by design of
   * the palette; these tokens only stop DM text and channel rows inheriting
   * the dark-page defaults. */
  --color-dm-text: #4f6168;
  --composer-field-bg: var(--color-bg-elevated);
  --color-channel-adventure: #5c6b00;
  --color-channel-adventure-bg: #f1f0d4;
  --color-channel-ooc: #1f5f8f;
  --color-channel-ooc-bg: #e8eef0;
  --color-channel-dm: #7f5f00;
  --color-channel-dm-bg: #f8edc9;
  --color-channel-creative: #4f529b;
  --color-channel-creative-bg: #efe9ef;

  /* Side-panel tab strip (#18301). base1 muted (#93a1a1) is 2.18:1 on base2,
   * and even base01 only reaches 4.39:1 there, so the strip sits on base3
   * with base01 labels (4.99:1) and a deeper blue selected pill (6.79:1). */
  --tab-strip-bg: var(--color-bg-primary);
  --tab-strip-text: #586e75;
  --tab-strip-active-bg: var(--color-bg-elevated);
  --tab-strip-active-text: #1f5f8f;

  /* Action dock + contextual chips chrome (#18302) — see the light preset in
   * _base.css. Labels reuse the strip's base01 ink; the blue focus ring is
   * the strip's deeper blue (base0 #268bd2 is 3.0:1 on base2). */
  --dock-label: var(--tab-strip-text);
  /* Toasts (#20164): base00 #657b83 is 4.45:1 on the white toast; the
   * strip's base01 ink is 5.37:1. */
  --toast-text: var(--tab-strip-text);
  --dock-accent: var(--color-channel-dm);
  --focus-ring-color: var(--tab-strip-active-text); /* #20158: the ONE focus ring — base0 gold #b58900 is 2.38:1 here */
  --dock-divider: var(--color-border-default);
  --dock-divider-faint: var(--color-border-subtle);
  --dock-chip-bg: var(--color-bg-elevated);
  --dock-chip-bg-hover: var(--color-bg-tertiary);
  --dock-chip-border: var(--color-border-strong);
  --dock-suggest-border: var(--color-border-strong);
  --dock-accent-border: var(--dock-accent);
  --dock-accent-border-strong: var(--dock-accent);

  /* Beat-control bar (#18512) — base0 blue (#268bd2) is too light for text on base3; label 7.31:1 on its fill (5.62:1 hovered), outline 3.67:1 on the page. */
  --beat-control-fg: #1a4d75;
  --beat-control-emphasis: #2a7ab8;
  --beat-control-border: #5585a8;
  --beat-control-wash: color-mix(in srgb, var(--beat-control-emphasis) 10%, transparent);
}

/* ----------------------------------------
 * NORD THEME
 * Arctic, north-bluish color palette
 * ---------------------------------------- */
html[data-theme="nord"] {
  /* Background Colors - Polar Night */
  --color-bg-primary: #2e3440;
  --color-bg-secondary: #3b4252;
  --color-bg-tertiary: #434c5e;
  --color-bg-elevated: #4c566a;
  --color-bg-hover: #545e72;

  /* Text Colors - Snow Storm */
  --color-text-primary: #eceff4;
  --color-text-secondary: #d8dee9;
  --color-text-muted: #7b88a1;
  --color-text-inverse: #2e3440;

  /* Accent Colors - Frost & Aurora */
  --color-accent-primary: #88c0d0;
  --color-accent-secondary: #a3be8c;
  --color-accent-warning: #ebcb8b;
  --color-accent-error: #bf616a;
  --color-accent-purple: #b48ead;

  /* Border Colors */
  --color-border-default: #4c566a;
  --color-border-subtle: #434c5e;
  --color-border-focus: #88c0d0;

  /* Semantic Colors */
  --color-hp-full: #a3be8c;
  --color-hp-mid: #ebcb8b;
  --color-hp-low: #bf616a;
  --color-xp: #88c0d0;
  --color-gold: #ebcb8b;

  /* Status Colors */
  --color-success-bg: rgba(163, 190, 140, 0.15);
  --color-success-text: #a3be8c;
  --color-warning-bg: rgba(235, 203, 139, 0.15);
  --color-warning-text: #ebcb8b;
  --color-info-bg: rgba(136, 192, 208, 0.15);
  --color-info-text: #88c0d0;
  --color-accent-bg: rgba(136, 192, 208, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.35);

  /* Scrollbar */
  --scrollbar-track-color: #2e3440;
  --scrollbar-thumb-color: #4c566a;
  --scrollbar-thumb-hover-color: #5e6a82;
}

/* ----------------------------------------
 * DRACULA THEME
 * Dark purple-ish theme with vibrant accents
 * ---------------------------------------- */
html[data-theme="dracula"] {
  /* Background Colors */
  --color-bg-primary: #282a36;
  --color-bg-secondary: #343746;
  --color-bg-tertiary: #3e4254;
  --color-bg-elevated: #484c62;
  --color-bg-hover: #525670;

  /* Text Colors */
  --color-text-primary: #f8f8f2;
  --color-text-secondary: #bfbfbf;
  --color-text-muted: #6272a4;
  --color-text-inverse: #282a36;

  /* Accent Colors - Dracula palette */
  --color-accent-primary: #bd93f9;
  --color-accent-secondary: #50fa7b;
  --color-accent-warning: #f1fa8c;
  --color-accent-error: #ff5555;
  --color-accent-purple: #ff79c6;

  /* Border Colors */
  --color-border-default: #44475a;
  --color-border-subtle: #3a3d4e;
  --color-border-focus: #bd93f9;

  /* Semantic Colors */
  --color-hp-full: #50fa7b;
  --color-hp-mid: #f1fa8c;
  --color-hp-low: #ff5555;
  --color-xp: #bd93f9;
  --color-gold: #f1fa8c;

  /* Status Colors */
  --color-success-bg: rgba(80, 250, 123, 0.15);
  --color-success-text: #50fa7b;
  --color-warning-bg: rgba(241, 250, 140, 0.15);
  --color-warning-text: #f1fa8c;
  --color-info-bg: rgba(189, 147, 249, 0.15);
  --color-info-text: #bd93f9;
  --color-accent-bg: rgba(189, 147, 249, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 14px rgba(189, 147, 249, 0.45);

  /* Scrollbar */
  --scrollbar-track-color: #282a36;
  --scrollbar-thumb-color: #44475a;
  --scrollbar-thumb-hover-color: #5a5e7a;
}

/* ========================================
 * RETRO PACK
 * ======================================== */

/* ----------------------------------------
 * NEOTERM THEME
 * 8-bit CRT aesthetic (ZX Spectrum palette)
 * ---------------------------------------- */
html[data-theme="neoterm"] {
  /* Background Colors - CRT black */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #141420;
  --color-bg-tertiary: #1a1a2e;
  --color-bg-elevated: #22223a;
  --color-bg-hover: #2a2a44;

  /* Text Colors - Bright white phosphor */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #606080;
  --color-text-inverse: #0a0a0a;

  /* Accent Colors - Softened ZX Spectrum */
  --color-accent-primary: #4ab8b8;   /* Cyan - desaturated */
  --color-accent-secondary: #5ab85a; /* Green - desaturated */
  --color-accent-warning: #c8c85a;   /* Yellow - desaturated */
  --color-accent-error: #c85a5a;     /* Red - desaturated */
  --color-accent-purple: #b85ab8;    /* Magenta - desaturated */

  /* ZX Spectrum softened palette (extra vars) */
  --color-zx-black: #0a0a0a;
  --color-zx-blue: #4a4ab8;
  --color-zx-red: #c85a5a;
  --color-zx-magenta: #b85ab8;
  --color-zx-green: #5ab85a;
  --color-zx-cyan: #4ab8b8;
  --color-zx-yellow: #c8c85a;
  --color-zx-white: #d0d0d0;

  /* Border Colors - Dark blue-tinted */
  --color-border-default: #2a2a4a;
  --color-border-subtle: #1a1a3a;
  --color-border-focus: #4ab8b8;

  /* Semantic Colors - Softened 8-bit */
  --color-hp-full: #5ab85a;
  --color-hp-mid: #c8c85a;
  --color-hp-low: #c85a5a;
  --color-xp: #4a4ab8;
  --color-gold: #c8c85a;

  /* Status Colors */
  --color-success-bg: rgba(90, 184, 90, 0.12);
  --color-success-text: #5ab85a;
  --color-warning-bg: rgba(200, 200, 90, 0.12);
  --color-warning-text: #c8c85a;
  --color-info-bg: rgba(74, 184, 184, 0.12);
  --color-info-text: #4ab8b8;
  --color-accent-bg: rgba(74, 184, 184, 0.08);

  /* Shadows - Softened cyan phosphor glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 10px rgba(74, 184, 184, 0.25);

  /* Scrollbar */
  --scrollbar-track-color: #0a0a0a;
  --scrollbar-thumb-color: #2a2a4a;
  --scrollbar-thumb-hover-color: #3a3a5a;
}

/* ----------------------------------------
 * ACTION DOCK on the lighter dark grounds (#18312)
 * Solarized-dark (#0b5262), nord (#4c566a) and dracula (#484c62) raise the
 * dock's 1440 left zone well above the default dark #404040, so the :root
 * --dock-* values in tokens/_colors.css land under WCAG there (label 3.53:1,
 * chip outline 2.94:1 on nord). Same brass family, one step brighter:
 * on the raised grounds label >= 4.62:1, accent >= 4.69:1, chip outline
 * >= 3.43:1, suggestion outline >= 3.20:1. The accent borders follow
 * --dock-accent through the :root color-mix().
 * ---------------------------------------- */
html[data-theme="solarized-dark"],
html[data-theme="nord"],
html[data-theme="dracula"] {
  --dock-label: #d6ccb4;
  --dock-accent: #f0c97a;
  --dock-chip-border: rgba(255, 255, 255, 0.54);
  --dock-suggest-border: rgba(255, 255, 255, 0.50);
}
/**
 * User Theme — Auto (follow the OS)
 * =================================
 * Lives in its OWN file, not at the tail of `_base.css`, because appending it
 * there took that file to 571 LOC and tripped the BLOCKING
 * `css_files_over_500_loc` ratchet (baseline 0, a closed invariant since #9740).
 * The presets it copies are in `_base.css`; the comparator that keeps the copies
 * honest across the file boundary is `spec/assets/auto_theme_css_parity_spec.rb`.
 * Required from `terminal/_user_themes.css`.
 */

/* ========================================
 * AUTO — FOLLOW THE OPERATING SYSTEM (#12382)
 * ========================================
 *
 * `auto` was selectable, persisted and validated for months while applying on
 * NO page: `grep -rho 'data-theme="[a-z-]*"' app/assets/stylesheets/` returned
 * 11 presets and `auto` was not among them, so a player who picked it sat at
 * `html[data-theme="auto"]` with no matching rule and silently fell through to
 * the `:root` defaults in `tokens/_colors.css`. The Auto button lit up
 * correctly on reload, so the UI reported success while nothing had changed —
 * the same family as #12300's `darker`/`sepia`.
 *
 * WHY THE RESOLUTION IS IN CSS AND NOT IN RUBY OR JS. The server cannot know
 * the client's OS colour scheme, so anything it renders is a guess the client
 * must correct — and a correction applied by a Stimulus controller runs after
 * first paint, which is a flash. `prefers-color-scheme` is evaluated by the
 * style engine before the first frame and re-evaluated live when the OS theme
 * changes, so there is no flash, no JS dependency, and nothing to wire per
 * layout. This is why #12382 deleted `data-theme-mode` and
 * `handleSystemThemeChange` from `theme_settings_controller.js` rather than
 * giving them the server producer they never had: CSS already does both jobs.
 *
 * These are NOT a single `[data-theme="auto"]` rule pinning one appearance —
 * that is what #12382's CONSTRAINTS forbid. They are two rules, each gated on
 * the OS preference, and each an EXACT copy of the preset it stands in for, so
 * auto-under-dark-OS is byte-identical to `dark` and auto-under-light-OS is
 * byte-identical to `light`. A browser that reports neither (pre-2019) matches
 * nothing here and falls back to the `:root` dark palette, which is the app
 * default.
 *
 * THE COPIES ARE THE HAZARD. This is one fact in two stores with no single
 * writer — edit `dark` or `light` above and these go stale in silence, which
 * is precisely how `auto` broke in the first place. The comparator is
 * `spec/assets/auto_theme_css_parity_spec.rb`: it parses this file and fails
 * if either block stops declaring exactly the same property -> value map as
 * its source. Do not hand-edit a block below without editing its source, and
 * do not "fix" a parity failure by editing only the copy.
 */

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    /* Background Colors */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-bg-tertiary: #3d3d3d;
    --color-bg-elevated: #404040;
    --color-bg-hover: #4a4a4a;

    /* Text Colors — the SAME trio as tokens/_colors.css :root (#20157). This block outranks
     * :root and is the default preset, so a value that differs here is the one players see. */
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #c0c0c0;
    --color-text-muted: #ababab;
    --color-text-inverse: #1a1a1a;

    /* Accent Colors - Slightly muted */
    --color-accent-primary: #5a9fd8;
    --color-accent-secondary: #8ab56e;
    --color-accent-warning: #d4b06e;
    --color-accent-error: #cf6068;
    --color-accent-purple: #b56cc8;

    /* Border Colors */
    --color-border-default: #404040;
    --color-border-subtle: #333333;
    --color-border-focus: #61afef;

    /* Semantic Colors */
    --color-hp-full: #8ab56e;
    --color-hp-mid: #d4b06e;
    --color-hp-low: #cf6068;
    --color-xp: #5a9fd8;
    --color-gold: #e8c44a;
    --color-error: #cf6068;
    --color-error-bg: rgba(207, 96, 104, 0.15);
    --color-error-muted: rgba(207, 96, 104, 0.3);

    /* Status Colors */
    --color-success-bg: rgba(138, 181, 110, 0.15);
    --color-success-text: #8ab56e;
    --color-warning-bg: rgba(212, 176, 110, 0.15);
    --color-warning-text: #d4b06e;
    --color-info-bg: rgba(90, 159, 216, 0.15);
    --color-info-text: #5a9fd8;
    --color-accent-bg: rgba(90, 159, 216, 0.1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 8px rgba(90, 159, 216, 0.3);

    /* Scrollbar — thumb raised for WCAG >=3:1 against track (#9846); track unchanged */
    --scrollbar-track-color: #1a1a1a;
    --scrollbar-thumb-color: #767676;
    --scrollbar-thumb-hover-color: #797979;
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    /* Background Colors */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #e9ecef;
    --color-bg-tertiary: #dee2e6;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #ced4da;

    /* Text Colors */
    --color-text-primary: #212529;
    --color-text-secondary: #495057;
    --color-text-muted: #5c636a;    /* #18279: was #868e96 — 2.55:1 on the system row's #dee2e6 */
    --color-text-inverse: #f8f9fa;

    /* Accent Colors - Darker for contrast on light bg */
    --color-accent-primary: #2563eb;
    --color-accent-secondary: #15803d; /* #18279: was #16a34a — player rows read 3.13:1 */
    --color-accent-warning: #ca8a04;
    --color-accent-error: #dc2626;
    --color-accent-purple: #9333ea;

    /* Border Colors */
    --color-border-default: #ced4da;
    --color-border-subtle: #dee2e6;
    --color-border-focus: #2563eb;

    /* Semantic Colors */
    --color-hp-full: #16a34a;
    --color-hp-mid: #ca8a04;
    --color-hp-low: #dc2626;
    --color-xp: #2563eb;
    --color-gold: #b8860b;

    /* Status Colors */
    --color-success-bg: rgba(22, 163, 74, 0.1);
    --color-success-text: #16a34a;
    --color-warning-bg: rgba(202, 138, 4, 0.1);
    --color-warning-text: #ca8a04;
    --color-info-bg: rgba(37, 99, 235, 0.1);
    --color-info-text: #2563eb;
    --color-accent-bg: rgba(37, 99, 235, 0.08);

    /* Shadows - Lighter for light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 12px rgba(37, 99, 235, 0.3);

    /* Scrollbar — thumb darkened for WCAG >=3:1 against track (#9846); track unchanged */
    --scrollbar-track-color: #f8f9fa;
    --scrollbar-thumb-color: #82888e;
    --scrollbar-thumb-hover-color: #616971;

    /* Narrative + channel grounds (#18279) — exact copy of the light preset. */
    --color-dm-text: #4a3520;
    --composer-field-bg: var(--color-bg-elevated);
    --color-channel-adventure: #166534;
    --color-channel-adventure-bg: #e7f4ea;
    --color-channel-ooc: #1d4ed8;
    --color-channel-ooc-bg: #e6eefb;
    --color-channel-dm: #92400e;
    --color-channel-dm-bg: #fbf1d9;
    --color-channel-creative: #7e22ce;
    --color-channel-creative-bg: #f2e8fb;

    /* Side-panel tab strip (#18301) — exact copy of the light preset. */
    --tab-strip-bg: var(--color-bg-secondary);
    --tab-strip-active-bg: var(--color-bg-elevated);
    --tab-strip-active-text: #1d4ed8;

    /* Action dock + contextual chips chrome (#18302) — copy of the light preset. */
    --dock-label: var(--color-text-muted);
    --dock-accent: var(--color-channel-dm);
    --focus-ring-color: var(--color-border-focus); /* #20158: the ONE focus ring (tokens/_play_accents.css) — gold is under 3:1 here */
    --dock-divider: var(--color-border-default);
    --dock-divider-faint: var(--color-border-subtle);
    --dock-chip-bg: var(--color-bg-elevated);
    --dock-chip-bg-hover: var(--color-bg-tertiary);
    --dock-chip-border: var(--color-border-strong);
    --dock-suggest-border: var(--color-border-strong);
    --dock-accent-border: var(--dock-accent);
    --dock-accent-border-strong: var(--dock-accent);

    /* Beat-control bar (#18512) — copy of the light preset. */
    --beat-control-fg: #1e4fa0;
    --beat-control-emphasis: #2563eb;
    --beat-control-border: #5b7fb8;
    --beat-control-wash: color-mix(in srgb, var(--beat-control-emphasis) 10%, transparent);
  }
}
/**
 * User Themes — light-preset accent controls (#18514)
 * ===================================================
 * The autopilot controls (organisms/turn_rhythm/_autopilot.css) read
 * --autopilot-*, whose :root defaults are the dark-tuned accent-blue scale.
 * Every light preset re-themes them here onto that preset's own
 * --beat-control-* values (#18512), which were already measured for a light
 * page, so the two control families stay one blue per preset.
 *
 * Its own file, not the tail of _base.css, because _base.css sits at the
 * blocking 500-LOC CSS cap (css_files_over_500_loc). The auto/light copy below
 * must track the light preset — both resolve through --beat-control-*, which
 * spec/assets/auto_theme_css_parity_spec.rb already holds equal.
 *
 * Measured by spec/assets/autopilot_light_contrast_18514_spec.rb (label
 * >= 4.5:1 on its wash and the hover fill, outlines >= 3:1).
 * Required from terminal/_user_themes.css.
 */

html[data-theme="light"],
html[data-theme="parchment"],
html[data-theme="solarized-light"] {
  --autopilot-fg: var(--beat-control-fg);
  --autopilot-emphasis: var(--beat-control-emphasis);
  --autopilot-border: var(--beat-control-border);
  --autopilot-wash: var(--beat-control-wash);
  --autopilot-on-emphasis: #ffffff;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --autopilot-fg: var(--beat-control-fg);
    --autopilot-emphasis: var(--beat-control-emphasis);
    --autopilot-border: var(--beat-control-border);
    --autopilot-wash: var(--beat-control-wash);
    --autopilot-on-emphasis: #ffffff;
  }
}
/**
 * User Themes — light-preset skill phrases (#20051)
 * ==================================================
 * The yellow wavy skill phrase (`.skill-opportunity`, owned by
 * organisms/narrative/wiki_links/_base.css) reads --skill-phrase-*, whose
 * :root defaults (tokens/_components.css) are the dark page's gold: #fcd34d
 * text on a 5% gold wash. Measured in the real compiled bundle on the light DM
 * row it was 1.20:1 (parchment 1.06:1, solarized-light 1.18:1) and the wavy
 * underline 1.10:1 — present, but not readable.
 *
 * Every light preset keeps the same family (amber text, amber wavy underline,
 * faint amber wash that strengthens on hover) at a depth the ground can carry:
 * text >= 4.5:1 and the underline >= 3:1 (WCAG 1.4.11) on every narrative
 * ground the preset paints, resting and hovered. Dark themes never match these
 * selectors, so they paint exactly what they did.
 *
 * The already-checked chip (#20054) reads --skill-phrase-checked-*: a cool
 * neutral grey — no amber, so it still reads as spent beside the live amber
 * phrase — at the same floors (text 4.5:1, wavy underline 3:1) on its own
 * grey wash. Its dark default #9ca3af read 2.01:1 on the light DM row.
 *
 * Its own file, not the tail of _base.css, because _base.css sits at the
 * blocking 500-LOC CSS cap (css_files_over_500_loc). Measured by
 * spec/assets/skill_phrase_light_contrast_20051_spec.rb.
 * Required from terminal/_user_themes.css.
 */

html[data-theme="light"],
html[data-theme="solarized-light"] {
  --skill-phrase-text: #7a4a00;
  --skill-phrase-text-hover: #5c3a00;
  --skill-phrase-underline: #b45309;
  --skill-phrase-underline-hover: var(--skill-phrase-text-hover);
  --skill-phrase-wash: color-mix(in srgb, var(--skill-phrase-underline) 6%, transparent);
  --skill-phrase-wash-faint: color-mix(in srgb, var(--skill-phrase-underline) 3%, transparent);
  --skill-phrase-wash-hover: color-mix(in srgb, var(--skill-phrase-underline) 14%, transparent);
  --skill-phrase-glow: color-mix(in srgb, var(--skill-phrase-underline) 30%, transparent);
  --skill-phrase-checked: #4b5563;
  --skill-phrase-checked-underline: #6b7280;
  --skill-phrase-checked-wash: color-mix(in srgb, var(--skill-phrase-checked) 6%, transparent);
  --skill-phrase-checked-mark: var(--skill-phrase-checked-underline);
}

/* Parchment's grounds are a step darker and warmer: one step deeper. */
html[data-theme="parchment"] {
  --skill-phrase-text: #6b4500;
  --skill-phrase-text-hover: #4f3000;
  --skill-phrase-underline: #a0440a;
  --skill-phrase-underline-hover: var(--skill-phrase-text-hover);
  --skill-phrase-wash: color-mix(in srgb, var(--skill-phrase-underline) 6%, transparent);
  --skill-phrase-wash-faint: color-mix(in srgb, var(--skill-phrase-underline) 3%, transparent);
  --skill-phrase-wash-hover: color-mix(in srgb, var(--skill-phrase-underline) 14%, transparent);
  --skill-phrase-glow: color-mix(in srgb, var(--skill-phrase-underline) 30%, transparent);
  --skill-phrase-checked: #3f4651;
  --skill-phrase-checked-underline: #5f6672;
  --skill-phrase-checked-wash: color-mix(in srgb, var(--skill-phrase-checked) 6%, transparent);
  --skill-phrase-checked-mark: var(--skill-phrase-checked-underline);
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --skill-phrase-text: #7a4a00;
    --skill-phrase-text-hover: #5c3a00;
    --skill-phrase-underline: #b45309;
    --skill-phrase-underline-hover: var(--skill-phrase-text-hover);
    --skill-phrase-wash: color-mix(in srgb, var(--skill-phrase-underline) 6%, transparent);
    --skill-phrase-wash-faint: color-mix(in srgb, var(--skill-phrase-underline) 3%, transparent);
    --skill-phrase-wash-hover: color-mix(in srgb, var(--skill-phrase-underline) 14%, transparent);
    --skill-phrase-glow: color-mix(in srgb, var(--skill-phrase-underline) 30%, transparent);
  --skill-phrase-checked: #4b5563;
  --skill-phrase-checked-underline: #6b7280;
  --skill-phrase-checked-wash: color-mix(in srgb, var(--skill-phrase-checked) 6%, transparent);
  --skill-phrase-checked-mark: var(--skill-phrase-checked-underline);
  }
}
/**
 * User Themes — spell-school badge palette (#18517)
 * =================================================
 * The spell-school badges (organisms/selection_panel/_spells.css) paint
 * --spell-school-<school> as the label on an opaque pill: 14% of that colour
 * mixed into --color-bg-primary. creation_spells_controller.js renders each
 * badge with data-school and NO inline colour, so this file is the badge's
 * whole palette.
 *
 * The :root defaults (Tailwind-300) serve every dark preset — the darkest
 * pairing is Illusion on nord at 4.71:1. Every light preset (light,
 * auto/light, parchment, solarized-light) re-themes them to Tailwind-800 —
 * the darkest pairing is Conjuration on parchment at 4.75:1. The auto/light
 * copy must stay identical to the light block.
 *
 * Lives under user_themes/ because it is a literal palette by construction
 * (the css_raw_color_literals_outside_tokens exemption), and not in
 * tokens/_colors.css or user_themes/_base.css, which sit at the 500-LOC cap.
 *
 * Measured by spec/assets/spell_school_badge_contrast_18517_spec.rb (every
 * school x every preset, label >= 4.5:1 on its pill).
 * Required from terminal/_user_themes.css.
 */

:root {
  --spell-school-abjuration: #93c5fd;
  --spell-school-conjuration: #fcd34d;
  --spell-school-divination: #c4b5fd;
  --spell-school-enchantment: #f9a8d4;
  --spell-school-evocation: #fca5a5;
  --spell-school-illusion: #a5b4fc;
  --spell-school-necromancy: #6ee7b7;
  --spell-school-transmutation: #5eead4;
  --spell-school-other: #d1d5db;
}

html[data-theme="light"],
html[data-theme="parchment"],
html[data-theme="solarized-light"] {
  --spell-school-abjuration: #1e40af;
  --spell-school-conjuration: #92400e;
  --spell-school-divination: #5b21b6;
  --spell-school-enchantment: #9d174d;
  --spell-school-evocation: #991b1b;
  --spell-school-illusion: #3730a3;
  --spell-school-necromancy: #065f46;
  --spell-school-transmutation: #115e59;
  --spell-school-other: #374151;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --spell-school-abjuration: #1e40af;
    --spell-school-conjuration: #92400e;
    --spell-school-divination: #5b21b6;
    --spell-school-enchantment: #9d174d;
    --spell-school-evocation: #991b1b;
    --spell-school-illusion: #3730a3;
    --spell-school-necromancy: #065f46;
    --spell-school-transmutation: #115e59;
    --spell-school-other: #374151;
  }
}
/**
 * User Themes — language badge palette (#18530)
 * ==============================================
 * The language-panel badges (creation_languages_controller.js: "Race" on an
 * already-known language, the 3-letter script on a pickable one) paint
 * --language-badge-<kind> as the label on an opaque pill: 14% of that colour
 * mixed into --color-bg-primary (organisms/selection_panel/_base.css). The
 * controller renders each badge with data-language-badge and NO inline
 * colour, so this file is the badge's whole palette.
 *
 * The :root defaults (Tailwind-300) serve every dark preset; every light
 * preset (light, auto/light, parchment, solarized-light) re-themes them to
 * Tailwind-800. The auto/light copy must stay identical to the light block.
 *
 * A sibling of _spell_school_palette.css (#18517), for the same reasons: a
 * literal palette belongs under user_themes/ (the
 * css_raw_color_literals_outside_tokens exemption), and tokens/_colors.css /
 * user_themes/_base.css sit at the 500-LOC cap.
 *
 * Measured by spec/assets/language_badge_contrast_18530_spec.rb (every badge
 * kind x every preset, label >= 4.5:1 on its pill).
 * Required from terminal/_user_themes.css.
 */

:root {
  --language-badge-known: #6ee7b7;
  --language-badge-script: #93c5fd;
}

html[data-theme="light"],
html[data-theme="parchment"],
html[data-theme="solarized-light"] {
  --language-badge-known: #065f46;
  --language-badge-script: #1e40af;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --language-badge-known: #065f46;
    --language-badge-script: #1e40af;
  }
}
/**
 * User Themes — selection chip palette (#18533)
 * ==============================================
 * The character-creation selection panel (organisms/selection_panel/) paints
 * its panel ground, its chips (.selection-panel__chip / .spell-chip — the
 * spell and language pickers), its school filter tabs (.school-tab) and its
 * disabled confirm buttons from the tokens below. Until #18533 those were
 * dark-tuned rgba literals in the component CSS (white text, white wash,
 * violet hover/selected) that no theme overrode, so in every light preset the
 * chip names were near-white on a light page.
 *
 * The :root defaults are the pre-#18533 literals, except four tuned at
 * #18536 so every dark preset clears WCAG: the idle chip/tab border is a
 * white 38% wash (was 10%, ~1.3:1; now >= 3.06:1, nord lowest), the hover
 * border a violet-400 75% wash (was violet 40%, ~1.5:1; now >= 3.03:1), the
 * active tab border is the preset accent like the selected chip's (was violet
 * 60%, ~2:1; now >= 3.10:1), and the hovered tab label is a 65% accent / 35%
 * white tint (was the bare accent, 2.53-4.49:1; now >= 4.59:1,
 * solarized-dark lowest). One :root value fits every dark preset, so no dark
 * preset needs its own override for these. Every light preset (light, auto/light,
 * parchment, solarized-light) re-themes them onto that preset's own tokens.
 * solarized-light's --color-text-primary (#657b83) is 4.1:1 on its own page,
 * so its chip text takes Solarized base02 instead. The auto/light copy must
 * stay identical to the light block. One dark preset is re-themed:
 * solarized-dark's selected label (see its block).
 *
 * A sibling of _spell_school_palette.css (#18517) and
 * _language_badge_palette.css (#18530): a literal palette belongs under
 * user_themes/ (the css_raw_color_literals_outside_tokens exemption), and
 * tokens/_colors.css / user_themes/_base.css sit at the 500-LOC cap.
 *
 * Measured by spec/assets/selection_chip_contrast_18533_spec.rb.
 * Required from terminal/_user_themes.css.
 */

:root {
  --selection-panel-bg: rgba(20, 20, 30, 0.6);

  --selection-chip-fg: rgba(255, 255, 255, 0.8);
  --selection-chip-bg: rgba(255, 255, 255, 0.03);
  --selection-chip-border: rgba(255, 255, 255, 0.38);
  --selection-chip-hover-bg: rgba(139, 92, 246, 0.15);
  --selection-chip-hover-border: rgba(167, 139, 250, 0.75);
  --selection-chip-selected-bg: rgba(139, 92, 246, 0.3);
  --selection-chip-selected-border: var(--color-accent-purple);
  --selection-chip-selected-fg: var(--color-text-primary);

  --school-tab-fg: rgba(255, 255, 255, 0.6);
  --school-tab-bg: rgba(255, 255, 255, 0.05);
  --school-tab-border: rgba(255, 255, 255, 0.38);
  /* A lighter tint of the preset's own accent, not a fixed violet: the
     accent varies per preset (#6c71c4 solarized-dark ... #ff79c6 dracula). */
  --school-tab-hover-fg: color-mix(in srgb, var(--color-accent-purple) 65%, #ffffff);
  --school-tab-hover-bg: rgba(139, 92, 246, 0.2);
  --school-tab-hover-border: rgba(167, 139, 250, 0.75);
  --school-tab-active-fg: var(--color-text-primary);
  --school-tab-active-bg: rgba(139, 92, 246, 0.4);
  --school-tab-active-border: var(--color-accent-purple);

  --selection-confirm-disabled-fg: rgba(255, 255, 255, 0.4);
  --selection-confirm-disabled-bg: rgba(139, 92, 246, 0.3);
}

html[data-theme="light"],
html[data-theme="parchment"],
html[data-theme="solarized-light"] {
  --selection-panel-bg: var(--color-bg-secondary);

  --selection-chip-fg: var(--color-text-primary);
  --selection-chip-bg: var(--color-bg-primary);
  --selection-chip-border: color-mix(in srgb, var(--selection-chip-fg) 65%, var(--color-bg-primary));
  --selection-chip-hover-bg: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-primary));
  --selection-chip-hover-border: var(--color-accent-purple);
  --selection-chip-selected-bg: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
  --selection-chip-selected-border: var(--color-accent-purple);
  --selection-chip-selected-fg: var(--selection-chip-fg);

  --school-tab-fg: var(--selection-chip-fg);
  --school-tab-bg: var(--color-bg-primary);
  --school-tab-border: color-mix(in srgb, var(--selection-chip-fg) 65%, var(--color-bg-primary));
  --school-tab-hover-fg: var(--selection-chip-fg);
  --school-tab-hover-bg: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-primary));
  --school-tab-hover-border: var(--color-accent-purple);
  --school-tab-active-fg: var(--selection-chip-fg);
  --school-tab-active-bg: color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-bg-primary));
  --school-tab-active-border: var(--color-accent-purple);

  --selection-confirm-disabled-fg: color-mix(in srgb, var(--selection-chip-fg) 60%, var(--color-bg-primary));
  --selection-confirm-disabled-bg: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
}

/* Solarized base02: the preset's own --color-text-primary is 4.1:1 on its page. */
html[data-theme="solarized-light"] {
  --selection-chip-fg: #073642;
}

/* solarized-dark's --color-text-primary (#839496) is 3.8:1 on the selected
   chip's violet wash; selected/active labels take Solarized base2 there. Every
   other dark preset keeps the :root defaults. */
html[data-theme="solarized-dark"] {
  --selection-chip-selected-fg: #eee8d5;
  --school-tab-active-fg: #eee8d5;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --selection-panel-bg: var(--color-bg-secondary);

    --selection-chip-fg: var(--color-text-primary);
    --selection-chip-bg: var(--color-bg-primary);
    --selection-chip-border: color-mix(in srgb, var(--selection-chip-fg) 65%, var(--color-bg-primary));
    --selection-chip-hover-bg: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-primary));
    --selection-chip-hover-border: var(--color-accent-purple);
    --selection-chip-selected-bg: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
    --selection-chip-selected-border: var(--color-accent-purple);
    --selection-chip-selected-fg: var(--selection-chip-fg);

    --school-tab-fg: var(--selection-chip-fg);
    --school-tab-bg: var(--color-bg-primary);
    --school-tab-border: color-mix(in srgb, var(--selection-chip-fg) 65%, var(--color-bg-primary));
    --school-tab-hover-fg: var(--selection-chip-fg);
    --school-tab-hover-bg: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-primary));
    --school-tab-hover-border: var(--color-accent-purple);
    --school-tab-active-fg: var(--selection-chip-fg);
    --school-tab-active-bg: color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-bg-primary));
    --school-tab-active-border: var(--color-accent-purple);

    --selection-confirm-disabled-fg: color-mix(in srgb, var(--selection-chip-fg) 60%, var(--color-bg-primary));
    --selection-confirm-disabled-bg: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
  }
}
/**
 * User Themes — NPC speaker hue + disposition palette (#20173)
 * ============================================================
 * tokens/_npc_palette.css (#20172) defines the 16 speaker hues
 * (--color-npc-hue-0..15, indexed by |hash31(name)| % 16 in Ruby and JS) and
 * the --color-disposition-* aliases once, tuned for the dark page. On a light
 * page they were 1.02-4.43:1 (pale yellow #ffeaa7 on parchment: 1.02:1).
 *
 * Every light preset (light, auto/light, parchment, solarized-light) re-themes
 * each hue to a darker shade of the SAME hue family at the SAME index, so an
 * NPC keeps its slot and token name and only the shade moves. Family members
 * (coral/crimson, teal/mint/sage, sky/light/bright blue, plum/lavender/
 * amethyst, pale yellow/marigold/gold) are split by lightness and saturation
 * so the 16 stay distinguishable (CIE76 dE >= 12 pairwise). One block serves
 * all three light grounds: the darkest, parchment's #f4e8d1, bounds it (lowest
 * pairing: hue-1 teal at 4.62:1). The auto/light copy must stay identical to
 * the light block.
 *
 * Dispositions: the light presets do not re-tune --color-error /
 * --color-entity-* / --accent-world, so the aliases are overridden directly.
 * Green stays out (#20139: green is the player's own). light's
 * --color-text-muted already clears AA, so neutral is re-themed only for
 * parchment and solarized-light.
 *
 * A sibling of _spell_school_palette.css (#18517): a literal palette belongs
 * under user_themes/ (the css_raw_color_literals_outside_tokens exemption).
 *
 * Measured by spec/assets/npc_hue_light_contrast_20173_spec.rb.
 * Required from terminal/_user_themes.css.
 */

html[data-theme="light"],
html[data-theme="parchment"],
html[data-theme="solarized-light"] {
  --color-npc-hue-0: #b83232;  /* coral red */
  --color-npc-hue-1: #0b7470;  /* teal */
  --color-npc-hue-2: #0a6a86;  /* sky blue */
  --color-npc-hue-3: #4d6b5c;  /* sage */
  --color-npc-hue-4: #6b5d1f;  /* pale yellow -> khaki */
  --color-npc-hue-5: #a3309f;  /* plum */
  --color-npc-hue-6: #1b5e4e;  /* mint */
  --color-npc-hue-7: #786200;  /* marigold */
  --color-npc-hue-8: #76589a;  /* lavender */
  --color-npc-hue-9: #3e6990;  /* light blue */
  --color-npc-hue-10: #945600; /* gold */
  --color-npc-hue-11: #a8180b; /* crimson */
  --color-npc-hue-12: #157236; /* emerald */
  --color-npc-hue-13: #7a2aa6; /* amethyst */
  --color-npc-hue-14: #1a5cb8; /* bright blue */
  --color-npc-hue-15: #a84a0a; /* carrot */

  --color-disposition-hostile: #b02020;
  --color-disposition-unfriendly: #8f5320;
  --color-disposition-friendly: #0b6e7a;
  --color-disposition-helpful: #1f5f9e;
  --color-disposition-allied: #7a5c00;
}

html[data-theme="parchment"] {
  --color-disposition-neutral: #6b5a40;
}

html[data-theme="solarized-light"] {
  --color-disposition-neutral: #586e75; /* Solarized base01 */
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --color-npc-hue-0: #b83232;
    --color-npc-hue-1: #0b7470;
    --color-npc-hue-2: #0a6a86;
    --color-npc-hue-3: #4d6b5c;
    --color-npc-hue-4: #6b5d1f;
    --color-npc-hue-5: #a3309f;
    --color-npc-hue-6: #1b5e4e;
    --color-npc-hue-7: #786200;
    --color-npc-hue-8: #76589a;
    --color-npc-hue-9: #3e6990;
    --color-npc-hue-10: #945600;
    --color-npc-hue-11: #a8180b;
    --color-npc-hue-12: #157236;
    --color-npc-hue-13: #7a2aa6;
    --color-npc-hue-14: #1a5cb8;
    --color-npc-hue-15: #a84a0a;

    --color-disposition-hostile: #b02020;
    --color-disposition-unfriendly: #8f5320;
    --color-disposition-friendly: #0b6e7a;
    --color-disposition-helpful: #1f5f9e;
    --color-disposition-allied: #7a5c00;
  }
}
/**
 * Terminal D&D User Theme Presets — Import Hub
 * ===============================================
 * Dark, light, greyscale, fantasy, high contrast, and retro theme presets.
 *
 * Decomposed into focused files under user_themes/ for maintainability.









 */