/**
 * 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 */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #888888;
  --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: #868e96;
  --color-text-inverse: #f8f9fa;

  /* Accent Colors - Darker for contrast on light bg */
  --color-accent-primary: #2563eb;
  --color-accent-secondary: #16a34a;
  --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;
}

/* ========================================
 * 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;
}

/* ----------------------------------------
 * 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;

  /* 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;
}

/* ----------------------------------------
 * 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;
}

/* ----------------------------------------
 * 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;
}
/**
 * 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 */
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #888888;
    --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: #868e96;
    --color-text-inverse: #f8f9fa;

    /* Accent Colors - Darker for contrast on light bg */
    --color-accent-primary: #2563eb;
    --color-accent-secondary: #16a34a;
    --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;
  }
}
/**
 * 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.



 */