/* Theme-Aware Color Variables - Dec 18, 2025 */

/* 
 * TWO CATEGORIES:
 * 1. SEMANTIC COLORS - Stay constant (carry meaning: status, phases, guilds)
 * 2. UI CHROME - Adapt to theme (backgrounds, borders, text)
 */

:root {
  /* =========================================
   * SEMANTIC COLORS (Theme-Independent)
   * These carry MEANING - users learn the color associations
   * ========================================= */

  /* Status/Confidence Colors (workflow states) */
  --semantic-status-red: #ef4444;
  --semantic-status-red-light: #f87171;
  --semantic-status-red-bg: rgb(239, 68, 68, 0.15);
  --semantic-status-red-glow: rgb(239, 68, 68, 0.4);
  --semantic-status-orange: #f97316;
  --semantic-status-orange-light: #fb923c;
  --semantic-status-orange-bg: rgb(249, 115, 22, 0.15);
  --semantic-status-orange-glow: rgb(249, 115, 22, 0.4);
  --semantic-status-yellow: #eab308;
  --semantic-status-yellow-light: #fbbf24;
  --semantic-status-yellow-bg: rgb(251, 191, 36, 0.15);
  --semantic-status-yellow-glow: rgb(234, 179, 8, 0.4);
  --semantic-status-green: #22c55e;
  --semantic-status-green-light: #4ade80;
  --semantic-status-green-bg: rgb(34, 197, 94, 0.15);
  --semantic-status-green-glow: rgb(34, 197, 94, 0.4);
  --semantic-status-blue: #3b82f6;
  --semantic-status-blue-light: #60a5fa;
  --semantic-status-blue-bg: rgb(56, 189, 248, 0.15);
  --semantic-status-blue-glow: rgb(59, 130, 246, 0.4);

  /* Journey Segment Colors (phase identity) */
  --semantic-segment-genesis: #6b7280;
  --semantic-segment-foundation: #10b981;
  --semantic-segment-content: #f59e0b;
  --semantic-segment-refinement: #8b5cf6;
  --semantic-segment-production: #3b82f6;
  --semantic-segment-deployment: #ec4899;
  --semantic-segment-legacy: #14b8a6;

  /* Guild Identity Colors */
  --semantic-guild-adler: #9c27b0; /* Unity - purple */
  --semantic-guild-tyler: #2196f3; /* Integrity - blue */
  --semantic-guild-wiggins: #4caf50; /* Necessity - green */
  --semantic-guild-cothran: #ff9800; /* Classical Formation - amber */
  --semantic-guild-headmaster: #f44336; /* Architectural - red */

  /* Role Colors */
  --semantic-role-owner: #9c27b0;
  --semantic-role-admin: #f44336;
  --semantic-role-editor: #2196f3;
  --semantic-role-author: #4caf50;
  --semantic-role-user: #ff9800;
  --semantic-role-guest: #607d8b;

  /* Confidence Legend Text (brighter variants for contrast) */
  --semantic-legend-red: #fecaca;
  --semantic-legend-orange: #fed7aa;
  --semantic-legend-yellow: #fef08a;
  --semantic-legend-green: #bbf7d0;
  --semantic-legend-blue: #bfdbfe;

  /* =========================================
   * UI CHROME (Theme-Dependent)
   * These adapt to light/dark themes
   * ========================================= */

  /* Base colors - Dark theme default */
  --base-bg-primary: #0f172a;
  --base-bg-secondary: #1e293b;
  --base-bg-tertiary: #334155;
  --base-bg-elevated: #1e293b;
  --base-bg-sunken: #080d1c;
  --base-text-primary: #f1f5f9;
  --base-text-secondary: #cbd5e1;
  --base-text-muted: #94a3b8;
  --base-text-inverted: #0f172a;
  --base-border-primary: #475569;
  --base-border-secondary: #334155;
  --base-border-focus: #60a5fa;

  /* Backward compatibility aliases */
  --status-red: var(--semantic-status-red-light);
  --status-red-bg: var(--semantic-status-red-bg);
  --status-orange: var(--semantic-status-orange-light);
  --status-orange-bg: var(--semantic-status-orange-bg);
  --status-yellow: var(--semantic-status-yellow-light);
  --status-yellow-bg: var(--semantic-status-yellow-bg);
  --status-green: var(--semantic-status-green-light);
  --status-green-bg: var(--semantic-status-green-bg);
  --status-blue: var(--semantic-status-blue-light);
  --status-blue-bg: var(--semantic-status-blue-bg);

  /* =========================================
   * ACCENT COLORS - Theme-Switchable
   * These change with the theme (e.g., blue for dark, red for Mustang GT)
   * ========================================= */
  --color-accent-rgb: 59, 130, 246;
  --color-accent-primary: #3b82f6;
  --color-accent-secondary: #60a5fa;
  --color-accent-alpha: rgb(59, 130, 246, 0.15);
  --color-accent-glow: rgb(59, 130, 246, 0.4);

  /* Modal overlays */
  --modal-overlay: rgb(0, 0, 0, 0.7);
  --modal-bg: var(--base-bg-secondary);
  --modal-header-bg: linear-gradient(
    135deg,
    var(--base-bg-tertiary) 0%,
    var(--base-bg-secondary) 100%
  );
  --modal-border: var(--base-border-primary);

  /* Interactive elements
   * STANDARD: Button backgrounds are NEUTRAL GRAY
   * Only focus rings and borders use theme accent colors
   */
  --button-primary-bg: var(--base-bg-tertiary);
  --button-primary-hover: var(--base-bg-secondary);
  --button-primary-text: var(--base-text-primary);
  --button-secondary-bg: var(--base-bg-secondary);
  --button-secondary-hover: var(--base-bg-tertiary);
  --button-secondary-text: var(--base-text-secondary);
  --button-danger-bg: var(--base-bg-tertiary);
  --button-danger-hover: var(--base-bg-secondary);
  --button-danger-border: var(--semantic-status-red);
  --button-ghost-hover: rgb(255, 255, 255, 0.1);

  /* Button accent border/ring (changes with theme) */
  --button-accent-border: rgba(var(--color-accent-rgb), 0.5);
  --button-accent-border-hover: rgba(var(--color-accent-rgb), 0.7);
  --button-accent-ring: rgba(var(--color-accent-rgb), 0.6);

  /* Input fields */
  --input-bg: var(--base-bg-primary);
  --input-border: var(--base-border-primary);
  --input-focus-border: var(--base-border-focus);
  --input-text: var(--base-text-primary);
  --input-placeholder: var(--base-text-muted);

  /* Cards and panels */
  --card-bg: var(--base-bg-secondary);
  --card-border: var(--base-border-secondary);
  --card-shadow: 0 4px 6px -1px rgb(0, 0, 0, 0.3);

  /* =========================================
   * SHADOW SYSTEM - Theme-aware elevation
   * Dark themes: deeper, more dramatic shadows
   * Light themes: softer, subtle shadows
   * ========================================= */
  --shadow-xs: 0 1px 2px rgb(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgb(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgb(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgb(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 24px rgb(0, 0, 0, 0.4);
  --shadow-2xl: 0 24px 48px rgb(0, 0, 0, 0.5);
  --shadow-inner: inset 0 2px 4px rgb(0, 0, 0, 0.2);

  /* Accent RGB triplet for glow/focus shadows - default blue */
  --color-accent-rgb: 59, 130, 246;
  --shadow-glow: 0 0 20px rgb(var(--color-accent-rgb), 0.3);
  --shadow-focus: 0 0 0 3px rgb(var(--color-accent-rgb), 0.4);

  /* =========================================
   * GRADIENT SYSTEM - Theme-aware gradients
   * ========================================= */
  --gradient-subtle: linear-gradient(
    135deg,
    var(--base-bg-secondary) 0%,
    var(--base-bg-tertiary) 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    rgb(139, 92, 246, 0.15) 0%,
    rgb(59, 130, 246, 0.1) 100%
  );
  --gradient-success: linear-gradient(
    135deg,
    rgb(34, 197, 94, 0.15) 0%,
    rgb(16, 185, 129, 0.1) 100%
  );
  --gradient-warning: linear-gradient(
    135deg,
    rgb(249, 115, 22, 0.15) 0%,
    rgb(234, 179, 8, 0.1) 100%
  );
  --gradient-danger: linear-gradient(135deg, rgb(239, 68, 68, 0.15) 0%, rgb(220, 38, 38, 0.1) 100%);

  /* Scrollbars */
  --scrollbar-track: var(--base-bg-tertiary);
  --scrollbar-thumb: var(--base-border-primary);
  --scrollbar-thumb-hover: var(--base-text-muted);

  /* Tooltips */
  --tooltip-bg: var(--base-bg-tertiary);
  --tooltip-text: var(--base-text-primary);
  --tooltip-border: var(--base-border-primary);

  /* =========================================
   * COMPATIBILITY LAYER - CRITICAL FOR THEME AWARENESS
   * =========================================
   *
   * CANONICAL NAMING: --base-* variables (defined above)
   * LEGACY NAMING:    --color-* variables (mapped below)
   *
   * WHY THIS EXISTS:
   * Some older CSS files use --color-bg-*, --color-text-*, --color-border-*
   * The theme system defines --base-bg-*, --base-text-*, --base-border-*
   * Without this mapping, legacy CSS falls back to hardcoded values
   * and IGNORES theme changes (e.g., Mustang GT red accents don't apply)
   *
   * RULE FOR NEW CSS:
   * ✅ USE: var(--base-bg-tertiary), var(--base-text-primary), etc.
   * ❌ AVOID: var(--color-bg-tertiary) - only works via this compatibility layer
   *
   * Run `node scripts/validate-css-variables.js` to check for issues
   * ========================================= */

  /* --color-bg-* → --base-bg-* (Background colors) */
  --color-bg-primary: var(--base-bg-primary);
  --color-bg-secondary: var(--base-bg-secondary);
  --color-bg-tertiary: var(--base-bg-tertiary);
  --color-bg-elevated: var(--base-bg-elevated);
  --color-bg-sunken: var(--base-bg-sunken);
  --color-bg-tertiary-hover: var(--base-bg-secondary); /* hover typically goes darker */

  /* --color-text-* → --base-text-* (Text colors) */
  --color-text-primary: var(--base-text-primary);
  --color-text-secondary: var(--base-text-secondary);
  --color-text-muted: var(--base-text-muted);
  --color-text-tertiary: var(--base-text-muted); /* alias for tertiary */
  --color-text-inverted: var(--base-text-inverted);

  /* --color-border-* → --base-border-* (Border colors) */
  --color-border-primary: var(--base-border-primary);
  --color-border-secondary: var(--base-border-secondary);
  --color-border-subtle: var(--base-border-secondary);
  --color-border-focus: var(--base-border-focus);

  /* Accent color aliases */
  --gt-blue: var(--color-accent-primary);
  --gt-blue-dark: #2563eb;
  --gt-accent: var(--color-accent-primary);
  --color-primary: var(--color-accent-primary);
  --color-primary-dark: #2563eb;
  --color-primary-hover: #2563eb;
  --color-primary-alpha: var(--color-accent-alpha);
  --accent-primary: var(--color-accent-primary);
  --color-text-accent: var(--color-accent-secondary);
  --color-border-accent: var(--color-accent-primary);
  --base-accent-blue: var(--color-accent-primary);

  /* GT namespace focus rings - blue by default, overridden per theme */
  --gt-focus-blue-rgb: 59, 130, 246;
  --gt-midnight-rgb: 15, 23, 42;

  /* RGB triplet aliases for rgba() usage */
  --gt-blue-rgb: var(--color-accent-rgb, 59, 130, 246);
  --gt-accent-rgb: var(--color-accent-rgb, 59, 130, 246);
}

/* =========================================
 * LIGHT THEME OVERRIDES
 * Only UI chrome changes - semantic colors stay the same!
 * ========================================= */
[data-theme='light'] {
  --base-bg-primary: #fff;
  --base-bg-secondary: #f8fafc;
  --base-bg-tertiary: #e2e8f0;
  --base-bg-elevated: #fff;
  --base-bg-sunken: #f1f5f9;
  --base-text-primary: #0f172a;
  --base-text-secondary: #334155;
  --base-text-muted: #64748b;
  --base-text-inverted: #f1f5f9;
  --base-border-primary: #cbd5e1;
  --base-border-secondary: #e2e8f0;
  --base-border-focus: #3b82f6;

  /* GT namespace for bento focus rings */
  --gt-focus-blue-rgb: 59, 130, 246;
  --gt-midnight-rgb: 241, 245, 249;
  --modal-overlay: rgb(0, 0, 0, 0.5);
  --button-ghost-hover: rgb(0, 0, 0, 0.05);
  --card-shadow: 0 4px 6px -1px rgb(0, 0, 0, 0.1);
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  /* Light theme shadows - softer, less dramatic */
  --shadow-xs: 0 1px 2px rgb(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgb(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgb(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgb(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgb(0, 0, 0, 0.15);
  --shadow-2xl: 0 24px 48px rgb(0, 0, 0, 0.2);
  --shadow-inner: inset 0 2px 4px rgb(0, 0, 0, 0.06);

  /* Accent colors - Blue */
  --color-accent-rgb: 59, 130, 246;
  --color-accent-primary: #3b82f6;
  --color-accent-secondary: #60a5fa;
  --color-accent-alpha: rgb(59, 130, 246, 0.15);
  --color-accent-glow: rgb(59, 130, 246, 0.4);
}

/* Aqua theme */
[data-theme='aqua'] {
  --base-bg-primary: #042f2e;
  --base-bg-secondary: #134e4a;
  --base-bg-tertiary: #115e59;
  --base-bg-elevated: #134e4a;
  --base-bg-sunken: #022c22;
  --base-text-primary: #ccfbf1;
  --base-text-secondary: #99f6e4;
  --base-text-muted: #5eead4;
  --base-border-primary: #14b8a6;
  --base-border-secondary: #0d9488;
  --base-border-focus: #2dd4bf;

  /* GT namespace for bento focus rings - Teal accent */
  --gt-focus-blue-rgb: 20, 184, 166;
  --gt-midnight-rgb: 4, 47, 46;

  /* Accent colors - Teal */
  --color-accent-rgb: 20, 184, 166;
  --color-accent-primary: #14b8a6;
  --color-accent-secondary: #2dd4bf;
  --color-accent-alpha: rgb(20, 184, 166, 0.15);
  --color-accent-glow: rgb(20, 184, 166, 0.4);
}

/* Slate theme */
[data-theme='slate'] {
  --base-bg-primary: #1e1e2e;
  --base-bg-secondary: #2a2a3c;
  --base-bg-tertiary: #3a3a4c;
  --base-bg-elevated: #2a2a3c;
  --base-bg-sunken: #14141f;
  --base-text-primary: #e4e4ef;
  --base-text-secondary: #b4b4c4;
  --base-text-muted: #8484a4;
  --base-border-primary: #4a4a6a;
  --base-border-secondary: #3a3a5a;
  --base-border-focus: #7c7cbc;

  /* GT namespace for bento focus rings - Purple accent */
  --gt-focus-blue-rgb: 124, 124, 188;
  --gt-midnight-rgb: 30, 30, 46;

  /* Accent colors - Purple */
  --color-accent-rgb: 124, 124, 188;
  --color-accent-primary: #7c7cbc;
  --color-accent-secondary: #9d9dd8;
  --color-accent-alpha: rgb(124, 124, 188, 0.15);
  --color-accent-glow: rgb(124, 124, 188, 0.4);
}

/* Sunlight theme */
[data-theme='sunlight'] {
  --base-bg-primary: #fffbeb;
  --base-bg-secondary: #fef3c7;
  --base-bg-tertiary: #fde68a;
  --base-bg-elevated: #fff;
  --base-bg-sunken: #fef9e7;
  --base-text-primary: #451a03;
  --base-text-secondary: #78350f;
  --base-text-muted: #92400e;
  --base-border-primary: #d97706;
  --base-border-secondary: #fbbf24;
  --base-border-focus: #f59e0b;

  /* GT namespace for bento focus rings */
  --gt-focus-blue-rgb: 245, 158, 11;
  --gt-midnight-rgb: 254, 249, 231;
  --button-ghost-hover: rgb(0, 0, 0, 0.05);
  --card-shadow: 0 4px 6px -1px rgb(146, 64, 14, 0.1);

  /* Accent colors - Amber */
  --color-accent-rgb: 245, 158, 11;
  --color-accent-primary: #d97706;
  --color-accent-secondary: #f59e0b;
  --color-accent-alpha: rgb(245, 158, 11, 0.15);
  --color-accent-glow: rgb(245, 158, 11, 0.4);
}

/* =========================================
 * MUSTANG GT - Two-tone black with red pinstripe
 * Inspired by Ford Mustang GT: Shadow Black (gloss) + Matte Black + Race Red accent
 * ========================================= */
/* =========================================
 * MUSTANG GT - Ford Mustang GT theme
 * Matte/gloss black with Race Red pinstripe accents
 *
 * BUTTON STYLING STANDARD:
 * - Button BACKGROUNDS are neutral GRAY (--base-bg-*)
 * - Button BORDERS/RINGS use Race Red accent (--color-accent-rgb)
 * - When switching themes, only borders change color, NOT backgrounds
 * ========================================= */
[data-theme='mustang-gt'] {
  --base-bg-primary: #1a1a1a; /* Matte/flat black */
  --base-bg-secondary: #0d0d0d; /* Gloss/shadow black */
  --base-bg-tertiary: #2a2a2a; /* Slightly elevated matte */
  --base-bg-elevated: #252525; /* Card surfaces */
  --base-bg-sunken: #050505; /* True black - deepest shadows */
  --base-text-primary: #f5f5f5; /* Clean white */
  --base-text-secondary: #b0b0b0; /* Soft gray */
  --base-text-muted: #707070; /* Muted gray */
  --base-text-inverted: #0d0d0d;

  /* Race Red pinstripe accents - for BORDERS and RINGS only */
  --base-border-primary: #c8102e; /* Ford Race Red */
  --base-border-secondary: #2a2a2a; /* Subtle dark borders */
  --base-border-focus: #e6192e; /* Brighter red on focus */
  --modal-overlay: rgb(0, 0, 0, 0.85);

  /* BUTTON BACKGROUNDS: Neutral gray, NOT accent color!
   * Inherits from :root which sets --button-primary-bg: var(--base-bg-tertiary)
   * DO NOT override these to red - only borders use accent colors
   */
  --button-ghost-hover: rgb(200, 16, 46, 0.15);
  --card-shadow: 0 4px 12px rgb(0, 0, 0, 0.6);
  --scrollbar-thumb: #c8102e;
  --scrollbar-thumb-hover: #e6192e;

  /* GT namespace for bento focus rings - Race Red pinstripe */
  --gt-focus-blue-rgb: 200, 16, 46;
  --gt-midnight-rgb: 26, 26, 26;

  /* Accent colors - Race Red (for borders, rings, and subtle highlights) */
  --color-accent-rgb: 200, 16, 46;
  --color-accent-primary: #c8102e;
  --color-accent-secondary: #e6192e;
  --color-accent-alpha: rgb(200, 16, 46, 0.15);
  --color-accent-glow: rgb(200, 16, 46, 0.4);

  /* Dark variants for hover states */
  --gt-blue-dark: #9a0b22;
  --color-primary-dark: #9a0b22;
  --color-primary-hover: #9a0b22;

  /* Map base-accent-primary to GRAY for button backgrounds
   * This prevents CSS using var(--base-accent-primary) from being red
   * Use --color-accent-primary for actual accent color needs
   */
  --base-accent-primary: var(--base-bg-tertiary);
  --base-accent-primary-rgb: 42, 42, 42; /* #2a2a2a in RGB */
}

/* =========================================
 * OLED BLACK - True black for OLED screens
 * Pure black backgrounds, saves battery, reduces eye strain
 * ========================================= */
[data-theme='oled'] {
  --base-bg-primary: #000;
  --base-bg-secondary: #0a0a0a;
  --base-bg-tertiary: #141414;
  --base-bg-elevated: #0f0f0f;
  --base-bg-sunken: #000;
  --base-text-primary: #fff;
  --base-text-secondary: #b3b3b3;
  --base-text-muted: #666;
  --base-border-primary: #333;
  --base-border-secondary: #1a1a1a;
  --base-border-focus: #60a5fa;
  --modal-overlay: rgb(0, 0, 0, 0.95);
  --card-shadow: 0 4px 6px rgb(0, 0, 0, 0.9);

  /* GT namespace for bento focus rings - Blue accent */
  --gt-focus-blue-rgb: 96, 165, 250;
  --gt-midnight-rgb: 0, 0, 0;

  /* Accent colors - Blue */
  --color-accent-rgb: 96, 165, 250;
  --color-accent-primary: #60a5fa;
  --color-accent-secondary: #93c5fd;
  --color-accent-alpha: rgb(96, 165, 250, 0.15);
  --color-accent-glow: rgb(96, 165, 250, 0.4);
}

/* =========================================
 * HIGH CONTRAST - WCAG AAA Accessibility
 * Maximum contrast for vision impaired users
 * ========================================= */
[data-theme='high-contrast'] {
  --base-bg-primary: #000;
  --base-bg-secondary: #000;
  --base-bg-tertiary: #1a1a1a;
  --base-bg-elevated: #0a0a0a;
  --base-bg-sunken: #000;
  --base-text-primary: #fff;
  --base-text-secondary: #fff;
  --base-text-muted: #ccc;
  --base-border-primary: #fff;
  --base-border-secondary: #ccc;
  --base-border-focus: #ff0;
  --button-primary-bg: #ff0;
  --button-primary-text: #000;
  --button-primary-hover: #cc0;
  --card-shadow: none;

  /* GT namespace for bento focus rings - Yellow for max visibility */
  --gt-focus-blue-rgb: 255, 255, 0;
  --gt-midnight-rgb: 0, 0, 0;

  /* Accent colors - Yellow */
  --color-accent-rgb: 255, 255, 0;
  --color-accent-primary: #ff0;
  --color-accent-secondary: #ff0;
  --color-accent-alpha: rgb(255, 255, 0, 0.2);
  --color-accent-glow: rgb(255, 255, 0, 0.5);
}

/* =========================================
 * SEPIA - Warm paper-like reading mode
 * Reduces eye strain for long reading sessions
 * ========================================= */
[data-theme='sepia'] {
  --base-bg-primary: #f4ecd8;
  --base-bg-secondary: #ebe3d0;
  --base-bg-tertiary: #ddd5c3;
  --base-bg-elevated: #f9f3e3;
  --base-bg-sunken: #e8e0cc;
  --base-text-primary: #433422;
  --base-text-secondary: #5c4a36;
  --base-text-muted: #7a6a56;
  --base-text-inverted: #f4ecd8;
  --base-border-primary: #c4b89a;
  --base-border-secondary: #d4c8aa;
  --base-border-focus: #8b7355;
  --button-ghost-hover: rgb(0, 0, 0, 0.05);
  --card-shadow: 0 2px 4px rgb(67, 52, 34, 0.1);

  /* GT namespace for bento focus rings - Warm brown accent */
  --gt-focus-blue-rgb: 139, 115, 85;
  --gt-midnight-rgb: 244, 236, 216;

  /* Accent colors - Warm brown */
  --color-accent-rgb: 139, 115, 85;
  --color-accent-primary: #8b7355;
  --color-accent-secondary: #a08868;
  --color-accent-alpha: rgb(139, 115, 85, 0.15);
  --color-accent-glow: rgb(139, 115, 85, 0.4);
}

/* =========================================
 * NORD - Arctic, ice-inspired palette
 * Popular developer theme with cool blue-gray tones
 * ========================================= */
[data-theme='nord'] {
  --base-bg-primary: #2e3440; /* Polar Night */
  --base-bg-secondary: #3b4252;
  --base-bg-tertiary: #434c5e;
  --base-bg-elevated: #3b4252;
  --base-bg-sunken: #272c36;
  --base-text-primary: #eceff4; /* Snow Storm */
  --base-text-secondary: #d8dee9;
  --base-text-muted: #a5b1c2;
  --base-border-primary: #4c566a;
  --base-border-secondary: #3b4252;
  --base-border-focus: #88c0d0; /* Frost */
  --button-primary-bg: #5e81ac; /* Nord Blue */
  --button-primary-hover: #81a1c1;
  --scrollbar-thumb: #4c566a;

  /* GT namespace for bento focus rings - Frost blue accent */
  --gt-focus-blue-rgb: 136, 192, 208;
  --gt-midnight-rgb: 46, 52, 64;

  /* Accent colors - Frost */
  --color-accent-rgb: 136, 192, 208;
  --color-accent-primary: #88c0d0;
  --color-accent-secondary: #8fbcbb;
  --color-accent-alpha: rgb(136, 192, 208, 0.15);
  --color-accent-glow: rgb(136, 192, 208, 0.4);
}

/* =========================================
 * SOLARIZED DARK - Ethan Schoonover's precision palette
 * Scientifically designed for optimal contrast
 * ========================================= */
[data-theme='solarized-dark'] {
  --base-bg-primary: #002b36; /* Base03 */
  --base-bg-secondary: #073642; /* Base02 */
  --base-bg-tertiary: #094959;
  --base-bg-elevated: #073642;
  --base-bg-sunken: #001e26;
  --base-text-primary: #fdf6e3; /* Base3 */
  --base-text-secondary: #eee8d5; /* Base2 */
  --base-text-muted: #839496; /* Base0 */
  --base-border-primary: #586e75; /* Base01 */
  --base-border-secondary: #073642;
  --base-border-focus: #268bd2; /* Blue */
  --button-primary-bg: #268bd2;
  --button-primary-hover: #2aa198; /* Cyan */

  /* GT namespace for bento focus rings - Solarized blue */
  --gt-focus-blue-rgb: 38, 139, 210;
  --gt-midnight-rgb: 0, 43, 54;

  /* Accent colors - Solarized blue */
  --color-accent-rgb: 38, 139, 210;
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #2aa198;
  --color-accent-alpha: rgb(38, 139, 210, 0.15);
  --color-accent-glow: rgb(38, 139, 210, 0.4);
}

/* =========================================
 * SOLARIZED LIGHT - Light variant
 * Same precision palette, inverted for light mode
 * ========================================= */
[data-theme='solarized-light'] {
  --base-bg-primary: #fdf6e3; /* Base3 */
  --base-bg-secondary: #eee8d5; /* Base2 */
  --base-bg-tertiary: #ddd6c6;
  --base-bg-elevated: #fdf6e3;
  --base-bg-sunken: #eee8d5;
  --base-text-primary: #002b36; /* Base03 */
  --base-text-secondary: #073642; /* Base02 */
  --base-text-muted: #657b83; /* Base00 */
  --base-text-inverted: #fdf6e3;
  --base-border-primary: #93a1a1; /* Base1 */
  --base-border-secondary: #eee8d5;
  --base-border-focus: #268bd2;

  /* GT namespace for bento focus rings */
  --gt-focus-blue-rgb: 38, 139, 210;
  --gt-midnight-rgb: 238, 232, 213;
  --button-ghost-hover: rgb(0, 0, 0, 0.05);
  --card-shadow: 0 2px 4px rgb(0, 43, 54, 0.1);

  /* Accent colors - Solarized blue */
  --color-accent-rgb: 38, 139, 210;
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #2aa198;
  --color-accent-alpha: rgb(38, 139, 210, 0.15);
  --color-accent-glow: rgb(38, 139, 210, 0.4);
}

/* =========================================
 * DRACULA - Purple/cyan dev favorite
 * High contrast dark theme with vibrant accents
 * ========================================= */
[data-theme='dracula'] {
  --base-bg-primary: #282a36; /* Background */
  --base-bg-secondary: #21222c; /* Current Line darker */
  --base-bg-tertiary: #44475a; /* Current Line */
  --base-bg-elevated: #2d2f3d;
  --base-bg-sunken: #1e1f29;
  --base-text-primary: #f8f8f2; /* Foreground */
  --base-text-secondary: #e0e0e0;
  --base-text-muted: #6272a4; /* Comment */
  --base-border-primary: #6272a4;
  --base-border-secondary: #44475a;
  --base-border-focus: #bd93f9; /* Purple */
  --button-primary-bg: #bd93f9; /* Purple */
  --button-primary-hover: #ff79c6; /* Pink */
  --button-primary-text: #282a36;
  --scrollbar-thumb: #bd93f9;

  /* GT namespace for bento focus rings - Dracula purple */
  --gt-focus-blue-rgb: 189, 147, 249;
  --gt-midnight-rgb: 40, 42, 54;

  /* Accent colors - Dracula purple */
  --color-accent-rgb: 189, 147, 249;
  --color-accent-primary: #bd93f9;
  --color-accent-secondary: #ff79c6;
  --color-accent-alpha: rgb(189, 147, 249, 0.15);
  --color-accent-glow: rgb(189, 147, 249, 0.4);
}

/* =========================================
 * GRUVBOX DARK - Retro, warm earth tones
 * Earthy browns and oranges with good contrast
 * ========================================= */
[data-theme='gruvbox'] {
  --base-bg-primary: #282828; /* bg0 */
  --base-bg-secondary: #3c3836; /* bg1 */
  --base-bg-tertiary: #504945; /* bg2 */
  --base-bg-elevated: #3c3836;
  --base-bg-sunken: #1d2021; /* bg0_h */
  --base-text-primary: #ebdbb2; /* fg */
  --base-text-secondary: #d5c4a1; /* fg2 */
  --base-text-muted: #928374; /* gray */
  --base-border-primary: #665c54; /* bg3 */
  --base-border-secondary: #504945;
  --base-border-focus: #fe8019; /* Orange */
  --button-primary-bg: #fe8019; /* Orange */
  --button-primary-hover: #d65d0e; /* Darker orange */
  --button-primary-text: #282828;
  --scrollbar-thumb: #fe8019;

  /* GT namespace for bento focus rings - Gruvbox orange */
  --gt-focus-blue-rgb: 254, 128, 25;
  --gt-midnight-rgb: 40, 40, 40;

  /* Accent colors - Gruvbox orange */
  --color-accent-rgb: 254, 128, 25;
  --color-accent-primary: #fe8019;
  --color-accent-secondary: #d65d0e;
  --color-accent-alpha: rgb(254, 128, 25, 0.15);
  --color-accent-glow: rgb(254, 128, 25, 0.4);
}