/* ============================================
   COLOR PALETTE - CROSSWORD-BUILDER APP
   Central color system for consistent theming
   All new features should use these variables
   ============================================ */

:root {
   /* ===== GRID DIMENSIONS (Set dynamically by JavaScript) ===== */
   --grid-cols: 15;
   /* Default: 15 columns for fixed mode, updated dynamically for auto-sizing */
   --grid-rows: 15;
   /* Default: 15 rows for fixed mode, updated dynamically for auto-sizing */

   /* ===== PRIMARY BRAND COLORS ===== */
   /* Matches editorial-light (the default theme) — prevents any flash of old purple/blue */
   --primary-gradient-start: #2d0808;
   --primary-gradient-end: #6e1414;
   --primary-color: #6e1414;
   --primary-color-dark: #4a0e0e;

   /* Secondary color for gradients and accents */
   --secondary-color: #c9973e;
   --secondary-hover: #b07e2a;
   --secondary-light: #f0ddb0;

   /* Light variations for subtle UI elements */
   --primary-light: #8b2020;
   --primary-lighter: #f0ddb0;
   --primary-lightest: #fdf5e0;
   --primary-extra-light: #faf5ed;

   /* Dark variations for emphasis */
   --primary-darker: #4a0e0e;
   --primary-darkest: #2d0808;

   /* ===== SEMANTIC COLORS ===== */
   /* Success - used for print, confirm actions */
   --success-color: #28a745;
   --success-hover: #218838;
   --success-light: #d4edda;
   --success-lighter: #e8f5e9;
   --success-shadow: rgba(40, 167, 69, 0.2);

   /* Info/Primary - used for export, share actions */
   --info-color: #007bff;
   --info-hover: #0056b3;
   --info-light: #cfe2ff;
   --info-lighter: #e7f1ff;
   --info-shadow: rgba(0, 123, 255, 0.2);

   /* Danger/Error - used for warnings, delete actions */
   --danger-color: #ff3b30;
   --danger-hover: #e02d23;
   --danger-light: #f8d7da;
   --danger-lighter: #fce8e9;

   /* Difficulty badges (template cards, SEO template pages) — background
      reuses success/warning/danger-light above; only text/border are new. */
   --difficulty-easy-text: #155724;
   --difficulty-easy-border: #c3e6cb;
   --difficulty-medium-text: #856404;
   --difficulty-medium-border: #ffeeba;
   --difficulty-hard-text: #721c24;
   --difficulty-hard-border: #f5c6cb;
   --danger-shadow: rgba(255, 59, 48, 0.2);

   /* Warning - used for attention items */
   --warning-color: #ffc107;
   --warning-hover: #e0a800;
   --warning-light: #fff3cd;
   --warning-lighter: #fff9e6;
   --warning-shadow: rgba(255, 193, 7, 0.2);

   /* ===== NEUTRAL COLORS ===== */
   /* Base neutral scale for text, backgrounds, borders */
   --white: #ffffff;
   --black: #000000;

   /* Gray scale - from light to dark */
   --gray-50: #f8f9fa;
   --gray-100: #f5f5f5;
   --gray-200: #f0f0f0;
   --gray-300: #e8e8e8;
   --gray-400: #e0e0e0;
   --gray-500: #cccccc;
   --gray-600: #999999;
   --gray-700: #666666;
   --gray-800: #555555;
   --gray-900: #333333;

   /* ===== TEXT COLORS ===== */
   --text-primary: #1a0808;
   --text-secondary: #4a2a18;
   --text-tertiary: #7a5035;
   --text-light: #a07050;
   --text-white: #ffffff;
   --text-black: #1a0808;

   /* Role-based typography tokens ensure consistent font colors */
   --text-body: var(--text-primary);
   --text-heading: var(--text-primary);
   --text-label: var(--text-secondary);
   --text-muted: var(--text-light);
   --text-placeholder: var(--text-light);
   --text-link: var(--primary-color);
   --text-button-primary: var(--primary-color);
   --text-button-success: var(--success-color);
   --text-button-info: var(--info-color);
   --text-button-warning: var(--warning-color);
   --text-button-danger: var(--danger-color);
   --text-badge-positive: var(--success-color);
   --text-badge-warning: var(--warning-color);
   --text-badge-critical: var(--danger-color);
   --text-inverse: #faf5ed;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #faf5ed;
   --bg-secondary: #faf5ed;
   --bg-tertiary: #f2e8d5;
   --bg-hover: #ede0c8;
   --bg-active: #d9c8a8;

   /* ===== BORDER COLORS ===== */
   --border-light: #f0e5d0;
   --border-default: #e8d9c0;
   --border-medium: #d9c8a8;
   --border-dark: #4a2a18;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   /* Default grid colors (can be customized by user) */
   --grid-empty-cell: #ffffff;
   --grid-filled-cell: #1a0808;
   --grid-text-color: #1a0808;
   --grid-number-color: #6e1414;
   --grid-border-color: #e8d9c0;
   --grid-cell-border: #d9c8a8;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   /* Semi-transparent overlays */
   --overlay-light: rgba(255, 255, 255, 0.2);
   --overlay-medium: rgba(255, 255, 255, 0.3);
   --overlay-dark: rgba(0, 0, 0, 0.7);

   /* Shadow variations */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-2xl: 0 4px 20px rgba(0, 0, 0, 0.2);

   /* Colored shadows for interactive elements */
   --shadow-primary: 0 4px 16px rgba(110, 20, 20, 0.28);
   --shadow-success: 0 2px 6px rgba(40, 167, 69, 0.2);
   --shadow-info: 0 2px 6px rgba(0, 123, 255, 0.2);
   --shadow-danger: 0 2px 8px rgba(0, 0, 0, 0.3);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   /* For buttons, links, and interactive components */
   --interactive-bg: rgba(110, 20, 20, 0.06);
   --interactive-border: rgba(110, 20, 20, 0.2);
   --interactive-hover-bg: rgba(110, 20, 20, 0.12);

   /* ===== GRADIENT DEFINITIONS ===== */
   /* Ready-to-use gradient strings */
   --gradient-primary: linear-gradient(135deg, #2d0808 0%, #4a0e0e 50%, #6e1414 100%);
   --gradient-primary-light: linear-gradient(135deg, rgba(110, 20, 20, 0.08) 0%, rgba(139, 32, 32, 0.06) 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(201, 151, 62, 0.1) 0%, rgba(110, 20, 20, 0.06) 100%);
   /* very light single-color tints for low-hierarchy elements */
   --primary-tint: rgba(110, 20, 20, 0.07);
   --primary-tint-2: rgba(201, 151, 62, 0.08);
   --primary-lightest: #fdf5e0;
   /* subtle very light */
   --primary-lighter: #f0ddb0;
   --gradient-light: linear-gradient(135deg, #faf5ed 0%, #f2e8d5 100%);

   /* ===== OPACITY LEVELS ===== */
   /* Standard opacity values for consistency */
   --opacity-disabled: 0.5;
   --opacity-hover: 0.8;
   --opacity-light: 0.1;
   --opacity-medium: 0.5;
   --opacity-heavy: 0.7;
   --opacity-full: 1;

   /* ===== TRANSITION TIMINGS ===== */
   /* Standard timing for animations */
   --transition-fast: 0.2s;
   --transition-base: 0.3s;
   --transition-slow: 0.5s;

   /* ===== BORDER RADIUS ===== */
   /* Standard border radius values */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 12px;
   --radius-default: var(--radius-lg);
   /* 8px - App-wide default - DO NOT CHANGE */

   /* ===== SPACING ===== */
   /* Standard spacing values */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
   --spacing-lg: 16px;
   --spacing-xl: 20px;
   --spacing-2xl: 24px;
   --spacing-3xl: 30px;

   /* ===== TYPOGRAPHY SCALE ===== */
   /* UI font sizes — use these everywhere instead of hardcoded px values.
      font: inherit on inputs/buttons/selects ensures they all follow body. */
   --font-size-2xs: 11px;  /* tiny labels, badges */
   --font-size-xs: 12px;   /* secondary metadata, small tags */
   --font-size-sm: 13px;   /* dense lists, sidebar secondary text */
   --font-size-md: 14px;   /* default UI text (body base) */
   --font-size-lg: 16px;   /* primary content, editor inputs */
}

/* ============================================
   🌈 PALETTE 12 - "INK & GRID"
   Clean, high-contrast professional theme
   ============================================ */
[data-theme="ink-grid"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #4338CA;
   --primary-gradient-end: #312E81;
   --primary-color: #4338CA;
   --primary-color-dark: #312E81;

   --secondary-color: #0D9488;
   --secondary-hover: #0F766E;
   --secondary-light: #CCFBF1;

   /* Light variations */
   --primary-light: #6366F1;
   --primary-lighter: #818CF8;
   --primary-lightest: #EEF2FF;
   --primary-extra-light: #F5F7FF;

   /* Dark variations */
   --primary-darker: #3730A3;
   --primary-darkest: #1E1B4B;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #10B981;
   --success-hover: #059669;
   --success-shadow: rgba(16, 185, 129, 0.2);

   --info-color: #4338CA;
   --info-hover: #312E81;
   --info-shadow: rgba(67, 56, 202, 0.2);

   --danger-color: #EF4444;
   --danger-hover: #DC2626;
   --danger-shadow: rgba(239, 68, 68, 0.2);

   --warning-color: #F59E0B;
   --warning-hover: #D97706;
   --warning-shadow: rgba(245, 158, 11, 0.2);

   /* ===== NEUTRAL COLORS ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #F8FAFC;
   --gray-100: #F1F5F9;
   --gray-200: #E2E8F0;
   --gray-300: #CBD5E1;
   --gray-400: #94A3B8;
   --gray-500: #64748B;
   --gray-600: #475569;
   --gray-700: #334155;
   --gray-800: #1E293B;
   --gray-900: #0F172A;

   /* ===== TEXT COLORS ===== */
   --text-primary: #1E1B4B;
   --text-secondary: #475569;
   --text-tertiary: #64748B;
   --text-light: #94A3B8;
   --text-white: #ffffff;
   --text-black: #000000;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #FFFFFF;
   --bg-secondary: #F8FAFC;
   --bg-tertiary: #F1F5F9;
   --bg-hover: #E2E8F0;
   --bg-active: #CBD5E1;

   /* ===== BORDER COLORS ===== */
   --border-light: #F1F5F9;
   --border-default: #E2E8F0;
   --border-medium: #CBD5E1;
   --border-dark: #64748B;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #1E1B4B;
   --grid-filled-cell: #ffffff;
   --grid-text-color: #1E1B4B;
   --grid-number-color: #64748B;
   --grid-border-color: #1E1B4B;
   --grid-cell-border: #E2E8F0;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(255, 255, 255, 0.2);
   --overlay-medium: rgba(255, 255, 255, 0.3);
   --overlay-dark: rgba(30, 27, 75, 0.7);

   --shadow-sm: 0 1px 2px rgba(30, 27, 75, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(30, 27, 75, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(30, 27, 75, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(30, 27, 75, 0.1);
   --shadow-2xl: 0 25px 50px -12px rgba(30, 27, 75, 0.25);

   --shadow-primary: 0 4px 12px rgba(67, 56, 202, 0.3);
   --shadow-success: 0 2px 6px rgba(16, 185, 129, 0.2);
   --shadow-info: 0 2px 6px rgba(67, 56, 202, 0.2);
   --shadow-danger: 0 2px 8px rgba(239, 68, 68, 0.3);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(67, 56, 202, 0.05);
   --interactive-border: rgba(67, 56, 202, 0.2);
   --interactive-hover-bg: rgba(67, 56, 202, 0.1);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #4338CA 0%, #312E81 100%);
   --gradient-primary-light: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(67, 56, 202, 0.08) 0%, rgba(49, 46, 129, 0.06) 100%);
   --primary-tint: rgba(67, 56, 202, 0.08);
   --primary-tint-2: rgba(49, 46, 129, 0.06);
   --primary-lightest: #F5F7FF;
   --primary-lighter: #C7D2FE;
   --gradient-light: linear-gradient(135deg, #F8FAFC 0%, #ffffff 100%);
}

/* ============================================
   🌈 PALETTE 13 - "WARM SLATE"
   Soft, organic neutral theme with amber accents
   ============================================ */
[data-theme="warm-slate"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #44403C;
   --primary-gradient-end: #292524;
   --primary-color: #44403C;
   --primary-color-dark: #292524;

   --secondary-color: #D97706;
   --secondary-hover: #B45309;
   --secondary-light: #FCD34D;

   /* Light variations */
   --primary-light: #78716C;
   --primary-lighter: #A8A29E;
   --primary-lightest: #F5F5F4;
   --primary-extra-light: #FAFAF9;

   /* Dark variations */
   --primary-darker: #292524;
   --primary-darkest: #1C1917;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #10B981;
   --success-hover: #059669;
   --success-shadow: rgba(16, 185, 129, 0.2);

   --info-color: #44403C;
   --info-hover: #292524;
   --info-shadow: rgba(68, 64, 60, 0.2);

   --danger-color: #EF4444;
   --danger-hover: #DC2626;
   --danger-shadow: rgba(239, 68, 68, 0.2);

   --warning-color: #D97706;
   --warning-hover: #B45309;
   --warning-shadow: rgba(217, 119, 6, 0.2);

   /* ===== NEUTRAL COLORS ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #FAFAF9;
   --gray-100: #F5F5F4;
   --gray-200: #E7E5E4;
   --gray-300: #D6D3D1;
   --gray-400: #A8A29E;
   --gray-500: #78716C;
   --gray-600: #57534E;
   --gray-700: #44403C;
   --gray-800: #292524;
   --gray-900: #1C1917;

   /* ===== TEXT COLORS ===== */
   --text-primary: #1C1917;
   --text-secondary: #57534E;
   --text-tertiary: #78716C;
   --text-light: #A8A29E;
   --text-white: #ffffff;
   --text-black: #000000;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #FFFFFF;
   --bg-secondary: #FAFAF9;
   --bg-tertiary: #F5F5F4;
   --bg-hover: #E7E5E4;
   --bg-active: #D6D3D1;

   /* ===== BORDER COLORS ===== */
   --border-light: #F5F5F4;
   --border-default: #E7E5E4;
   --border-medium: #D6D3D1;
   --border-dark: #78716C;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #1C1917;
   --grid-filled-cell: #ffffff;
   --grid-text-color: #1C1917;
   --grid-number-color: #78716C;
   --grid-border-color: #1C1917;
   --grid-cell-border: #D6D3D1;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(255, 255, 255, 0.2);
   --overlay-medium: rgba(255, 255, 255, 0.3);
   --overlay-dark: rgba(28, 25, 23, 0.7);

   --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1);
   --shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.25);

   --shadow-primary: 0 4px 12px rgba(68, 64, 60, 0.3);
   --shadow-success: 0 2px 6px rgba(16, 185, 129, 0.2);
   --shadow-info: 0 2px 6px rgba(68, 64, 60, 0.2);
   --shadow-danger: 0 2px 8px rgba(239, 68, 68, 0.3);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(68, 64, 60, 0.05);
   --interactive-border: rgba(68, 64, 60, 0.2);
   --interactive-hover-bg: rgba(68, 64, 60, 0.1);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #44403C 0%, #292524 100%);
   --gradient-primary-light: linear-gradient(135deg, #F5F5F4 0%, #E7E5E4 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(68, 64, 60, 0.08) 0%, rgba(41, 37, 36, 0.06) 100%);
   --primary-tint: rgba(68, 64, 60, 0.08);
   --primary-tint-2: rgba(41, 37, 36, 0.06);
   --primary-lightest: #FAFAF9;
   --primary-lighter: #D6D3D1;
   --gradient-light: linear-gradient(135deg, #FAFAF9 0%, #ffffff 100%);
}

/* ============================================
   🩶 PALETTE - "LIGHT STEEL"
   Cool neutral grays — clean, minimal, accessible
   Palette: F8F9FA · E9ECEF · DEE2E6 · CED4DA · ADB5BD · 6C757D · 495057 · 343A40 · 212529
   Toggle via: document.documentElement.setAttribute('data-theme', 'light-steel')
   ============================================ */

[data-theme="light-steel"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #6C757D;
   /* Steel Gray */
   --primary-gradient-end: #495057;
   /* Dark Steel */
   --primary-color: #6C757D;
   --primary-color-dark: #495057;

   /* Secondary color for gradients and accents */
   --secondary-color: #495057;
   --secondary-hover: #343A40;
   --secondary-light: #ADB5BD;

   /* Light variations for subtle UI elements */
   --primary-light: #ADB5BD;
   --primary-lighter: #CED4DA;
   --primary-lightest: #E9ECEF;
   --primary-extra-light: #F8F9FA;

   /* Dark variations for emphasis */
   --primary-darker: #495057;
   --primary-darkest: #343A40;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #28A745;
   --success-hover: #218838;
   --success-shadow: rgba(40, 167, 69, 0.2);

   --info-color: #6C757D;
   --info-hover: #495057;
   --info-shadow: rgba(108, 117, 125, 0.2);

   --danger-color: #DC3545;
   --danger-hover: #C82333;
   --danger-shadow: rgba(220, 53, 69, 0.2);

   --warning-color: #FFC107;
   --warning-hover: #E0A800;
   --warning-shadow: rgba(255, 193, 7, 0.2);

   /* ===== NEUTRAL COLORS - Light Steel Scale ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #F8F9FA;
   /* Bright Snow */
   --gray-100: #F1F3F5;
   --gray-200: #E9ECEF;
   /* Platinum */
   --gray-300: #DEE2E6;
   /* Alabaster Grey */
   --gray-400: #CED4DA;
   --gray-500: #ADB5BD;
   --gray-600: #6C757D;
   /* Steel Gray */
   --gray-700: #495057;
   --gray-800: #343A40;
   --gray-900: #212529;
   /* Near Black */

   /* ===== TEXT COLORS ===== */
   --text-primary: #212529;
   --text-secondary: #495057;
   --text-tertiary: #6C757D;
   --text-light: #ADB5BD;
   --text-white: #ffffff;
   --text-black: #000000;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #FFFFFF;
   --bg-secondary: #F8F9FA;
   --bg-tertiary: #E9ECEF;
   --bg-hover: #DEE2E6;
   --bg-active: #CED4DA;

   /* ===== BORDER COLORS ===== */
   --border-light: #E9ECEF;
   --border-default: #DEE2E6;
   --border-medium: #CED4DA;
   --border-dark: #6C757D;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #212529;
   /* Near Black */
   --grid-filled-cell: #ffffff;
   --grid-text-color: #212529;
   --grid-number-color: #6C757D;
   --grid-border-color: #212529;
   --grid-cell-border: #DEE2E6;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(255, 255, 255, 0.2);
   --overlay-medium: rgba(255, 255, 255, 0.3);
   --overlay-dark: rgba(33, 37, 41, 0.7);

   --shadow-sm: 0 1px 2px rgba(33, 37, 41, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(33, 37, 41, 0.08);
   --shadow-lg: 0 10px 15px -3px rgba(33, 37, 41, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(33, 37, 41, 0.12);
   --shadow-2xl: 0 25px 50px -12px rgba(33, 37, 41, 0.2);

   --shadow-primary: 0 4px 12px rgba(108, 117, 125, 0.25);
   --shadow-success: 0 2px 6px rgba(40, 167, 69, 0.2);
   --shadow-info: 0 2px 6px rgba(108, 117, 125, 0.2);
   --shadow-danger: 0 2px 8px rgba(220, 53, 69, 0.3);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(108, 117, 125, 0.06);
   --interactive-border: rgba(108, 117, 125, 0.2);
   --interactive-hover-bg: rgba(108, 117, 125, 0.12);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #6C757D 0%, #495057 100%);
   --gradient-primary-light: linear-gradient(135deg, #E9ECEF 0%, #DEE2E6 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(108, 117, 125, 0.08) 0%, rgba(73, 80, 87, 0.06) 100%);
   --primary-tint: rgba(108, 117, 125, 0.08);
   --primary-tint-2: rgba(73, 80, 87, 0.06);
   --primary-lightest: #F8F9FA;
   --primary-lighter: #CED4DA;
   --gradient-light: linear-gradient(135deg, #F8F9FA 0%, #ffffff 100%);
}

/* ============================================
    PALETTE - "MINIMALIST GRAPHITE"
   Soft, flat, modern, professional theme
   Inspired by modern SaaS design (Notion/Linear)
   Toggle via: document.documentElement.setAttribute('data-theme', 'minimalist-graphite')
   ============================================ */

[data-theme="minimalist-graphite"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #475569;
   --primary-gradient-end: #334155;
   --primary-color: #475569;
   --primary-color-dark: #334155;

   --secondary-color: #64748B;
   --secondary-hover: #475569;
   --secondary-light: #94A3B8;

   /* Light variations */
   --primary-light: #94A3B8;
   --primary-lighter: #CBD5E1;
   --primary-lightest: #E2E8F0;
   --primary-extra-light: #F8FAFC;

   /* Dark variations */
   --primary-darker: #334155;
   --primary-darkest: #1E293B;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #10B981;
   --success-hover: #059669;
   --success-shadow: rgba(16, 185, 129, 0.2);

   --info-color: #475569;
   --info-hover: #334155;
   --info-shadow: rgba(71, 85, 105, 0.2);

   --danger-color: #EF4444;
   --danger-hover: #DC2626;
   --danger-shadow: rgba(239, 68, 68, 0.2);

   --warning-color: #F59E0B;
   --warning-hover: #D97706;
   --warning-shadow: rgba(245, 158, 11, 0.2);

   /* ===== NEUTRAL COLORS ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #F8FAFC;
   --gray-100: #F1F5F9;
   --gray-200: #E2E8F0;
   --gray-300: #CBD5E1;
   --gray-400: #94A3B8;
   --gray-500: #64748B;
   --gray-600: #475569;
   --gray-700: #334155;
   --gray-800: #1E293B;
   --gray-900: #0F172A;

   /* ===== TEXT COLORS ===== */
   --text-primary: #0F172A;
   --text-secondary: #475569;
   --text-tertiary: #64748B;
   --text-light: #94A3B8;
   --text-white: #ffffff;
   --text-black: #000000;

   --text-body: var(--text-primary);
   --text-heading: var(--text-primary);
   --text-label: var(--text-secondary);
   --text-muted: var(--text-tertiary);
   --text-placeholder: var(--text-light);
   --text-link: var(--primary-color);
   --text-button-primary: var(--primary-color);
   --text-button-success: var(--success-color);
   --text-button-info: var(--info-color);
   --text-button-warning: var(--warning-color);
   --text-button-danger: var(--danger-color);
   --text-inverse: #f8fafc;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #FFFFFF;
   --bg-secondary: #F8FAFC;
   --bg-tertiary: #F1F5F9;
   --bg-hover: #E2E8F0;
   --bg-active: #CBD5E1;

   /* ===== BORDER COLORS ===== */
   --border-light: #F1F5F9;
   --border-default: #E2E8F0;
   --border-medium: #CBD5E1;
   --border-dark: #64748B;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #0F172A;
   --grid-filled-cell: #ffffff;
   --grid-text-color: #0F172A;
   --grid-number-color: #64748B;
   --grid-border-color: #0F172A;
   --grid-cell-border: #E2E8F0;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(255, 255, 255, 0.2);
   --overlay-medium: rgba(255, 255, 255, 0.3);
   --overlay-dark: rgba(15, 23, 42, 0.7);

   --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
   --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

   --shadow-primary: 0 4px 12px rgba(71, 85, 105, 0.25);
   --shadow-success: 0 2px 6px rgba(16, 185, 129, 0.2);
   --shadow-info: 0 2px 6px rgba(71, 85, 105, 0.2);
   --shadow-danger: 0 2px 8px rgba(239, 68, 68, 0.3);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(71, 85, 105, 0.05);
   --interactive-border: rgba(71, 85, 105, 0.2);
   --interactive-hover-bg: rgba(71, 85, 105, 0.1);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #475569 0%, #1e293b 100%);
   --gradient-primary-light: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(71, 85, 105, 0.08) 0%, rgba(30, 41, 59, 0.06) 100%);
   --primary-tint: rgba(71, 85, 105, 0.08);
   --primary-tint-2: rgba(30, 41, 59, 0.06);
   --primary-lightest: #f8fafc;
   --primary-lighter: #cbd5e1;
   --gradient-light: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

/* ============================================
    PALETTE 17 - "EDITORIAL LIGHT"
   Warm cream · burnished gold · deep burgundy
   Toggle via: document.documentElement.setAttribute('data-theme', 'editorial-light')
   ============================================ */

[data-theme="editorial-light"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #6e1414;
   --primary-gradient-end: #8b2020;
   --primary-color: #6e1414;
   --primary-color-dark: #4a0e0e;

   --secondary-color: #c9973e;
   --secondary-hover: #b07e2a;

   --primary-light: #8b2020;
   --primary-lighter: #c47070;
   --primary-lightest: #f0ddb0;
   --primary-extra-light: #fdf5e0;

   --primary-darker: #4a0e0e;
   --primary-darkest: #2d0808;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #3a7d44;
   --success-hover: #2d6336;
   --success-light: #d6e8d8;
   --success-lighter: #eaf4eb;
   --success-shadow: rgba(58, 125, 68, 0.2);

   --info-color: #4a6fa5;
   --info-hover: #3a5882;
   --info-light: #d0ddef;
   --info-lighter: #e8eef7;
   --info-shadow: rgba(74, 111, 165, 0.2);

   --danger-color: #b94040;
   --danger-hover: #962e2e;
   --danger-light: #f5d5d5;
   --danger-lighter: #fae9e9;
   --danger-shadow: rgba(185, 64, 64, 0.2);

   --warning-color: #c9973e;
   --warning-hover: #b07e2a;
   --warning-light: #f0ddb0;
   --warning-lighter: #fdf5e0;
   --warning-shadow: rgba(201, 151, 62, 0.25);

   /* ===== NEUTRAL COLORS ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #faf5ed;
   --gray-100: #f5eed9;
   --gray-200: #f2e8d5;
   --gray-300: #e8d9c0;
   --gray-400: #d9c8a8;
   --gray-500: #c4a87a;
   --gray-600: #a07050;
   --gray-700: #7a5035;
   --gray-800: #4a2a18;
   --gray-900: #1a0808;

   /* ===== TEXT COLORS ===== */
   --text-primary: #1a0808;
   --text-secondary: #4a2a18;
   --text-tertiary: #7a5035;
   --text-light: #a07050;
   --text-white: #ffffff;
   --text-black: #1a0808;

   --text-body: var(--text-primary);
   --text-heading: var(--text-primary);
   --text-label: var(--text-secondary);
   --text-muted: var(--text-light);
   --text-placeholder: var(--text-light);
   --text-link: var(--primary-color);
   --text-button-primary: var(--primary-color);
   --text-button-success: var(--success-color);
   --text-button-info: var(--info-color);
   --text-button-warning: var(--warning-color);
   --text-button-danger: var(--danger-color);
   --text-badge-positive: var(--success-color);
   --text-badge-warning: var(--warning-color);
   --text-badge-critical: var(--danger-color);
   --text-inverse: #faf5ed;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #faf5ed;
   --bg-secondary: #faf5ed;
   --bg-tertiary: #f2e8d5;
   --bg-hover: #ede0c8;
   --bg-active: #d9c8a8;

   /* ===== BORDER COLORS ===== */
   --border-light: #f0e5d0;
   --border-default: #e8d9c0;
   --border-medium: #d9c8a8;
   --border-dark: #4a2a18;

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #ffffff;
   --grid-filled-cell: #1a0808;
   --grid-text-color: #1a0808;
   --grid-number-color: #6e1414;
   --grid-border-color: #e8d9c0;
   --grid-cell-border: #d9c8a8;

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(26, 8, 8, 0.08);
   --overlay-medium: rgba(26, 8, 8, 0.2);
   --overlay-dark: rgba(17, 6, 6, 0.7);

   --shadow-sm: 0 1px 3px rgba(26, 8, 8, 0.08);
   --shadow-md: 0 4px 12px rgba(26, 8, 8, 0.1);
   --shadow-lg: 0 8px 24px rgba(26, 8, 8, 0.12);
   --shadow-xl: 0 16px 40px rgba(26, 8, 8, 0.14);
   --shadow-2xl: 0 24px 56px rgba(26, 8, 8, 0.18);

   --shadow-primary: 0 4px 16px rgba(110, 20, 20, 0.28);
   --shadow-success: 0 4px 12px rgba(58, 125, 68, 0.2);
   --shadow-info: 0 4px 12px rgba(74, 111, 165, 0.2);
   --shadow-danger: 0 4px 12px rgba(185, 64, 64, 0.25);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(110, 20, 20, 0.06);
   --interactive-border: rgba(110, 20, 20, 0.2);
   --interactive-hover-bg: rgba(110, 20, 20, 0.12);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #2d0808 0%, #4a0e0e 50%, #6e1414 100%);
   --gradient-primary-light: linear-gradient(135deg, rgba(110, 20, 20, 0.08) 0%, rgba(139, 32, 32, 0.06) 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(201, 151, 62, 0.1) 0%, rgba(110, 20, 20, 0.06) 100%);
   --primary-tint: rgba(110, 20, 20, 0.07);
   --primary-tint-2: rgba(201, 151, 62, 0.08);
   --primary-lightest: #fdf5e0;
   --primary-lighter: #f0ddb0;
   --gradient-light: linear-gradient(135deg, #faf5ed 0%, #f2e8d5 100%);
}

/* ============================================
   🌑 PALETTE 18 - "EDITORIAL DARK"
   Deep wine · burnished gold · warm cream text
   Toggle via: document.documentElement.setAttribute('data-theme', 'editorial-dark')
   ============================================ */

[data-theme="editorial-dark"] {
   /* ===== PRIMARY BRAND COLORS ===== */
   --primary-gradient-start: #1f0c0c;
   --primary-gradient-end: #2d1212;
   --primary-color: #c9973e;
   --primary-color-dark: #b07e2a;

   --secondary-color: #ddb96b;
   --secondary-hover: #c9973e;

   --primary-light: #ddb96b;
   --primary-lighter: #f0ddb0;
   --primary-lightest: rgba(201, 151, 62, 0.15);
   --primary-extra-light: rgba(201, 151, 62, 0.08);

   --primary-darker: #b07e2a;
   --primary-darkest: #8b6118;

   /* ===== SEMANTIC COLORS ===== */
   --success-color: #5db87a;
   --success-hover: #4aa065;
   --success-light: rgba(93, 184, 122, 0.16);
   --success-lighter: rgba(93, 184, 122, 0.08);
   --success-shadow: rgba(93, 184, 122, 0.3);

   --info-color: #7aaddb;
   --info-hover: #5e96cc;
   --info-light: rgba(122, 173, 219, 0.18);
   --info-lighter: rgba(122, 173, 219, 0.1);
   --info-shadow: rgba(122, 173, 219, 0.3);

   --danger-color: #e07070;
   --danger-hover: #cc5555;
   --danger-light: rgba(224, 112, 112, 0.18);
   --danger-lighter: rgba(224, 112, 112, 0.1);
   --danger-shadow: rgba(224, 112, 112, 0.35);

   --warning-color: #ddb96b;
   --warning-hover: #c9973e;
   --warning-light: rgba(221, 185, 107, 0.2);
   --warning-lighter: rgba(221, 185, 107, 0.1);
   --warning-shadow: rgba(221, 185, 107, 0.35);

   /* ===== NEUTRAL COLORS ===== */
   --white: #ffffff;
   --black: #000000;

   --gray-50: #110606;
   --gray-100: #1f0c0c;
   --gray-200: #2d1212;
   --gray-300: #3e1a1a;
   --gray-400: #522424;
   --gray-500: #6e3535;
   --gray-600: #a07050;
   --gray-700: #c4a87a;
   --gray-800: #e8d9c0;
   --gray-900: #faf5ed;

   /* ===== TEXT COLORS ===== */
   --text-primary: #faf5ed;
   --text-secondary: #e8d9c0;
   --text-tertiary: #c4a87a;
   --text-light: #a07050;
   --text-white: #ffffff;
   --text-black: #1a0808;

   --text-body: var(--text-primary);
   --text-heading: var(--text-primary);
   --text-label: var(--text-secondary);
   --text-muted: var(--text-light);
   --text-placeholder: var(--text-light);
   --text-link: var(--primary-color);
   --text-button-primary: var(--primary-color);
   --text-button-success: var(--success-color);
   --text-button-info: var(--info-color);
   --text-button-warning: var(--warning-color);
   --text-button-danger: var(--danger-color);
   --text-badge-positive: var(--success-color);
   --text-badge-warning: var(--warning-color);
   --text-badge-critical: var(--danger-color);
   --text-inverse: #1a0808;

   /* ===== BACKGROUND COLORS ===== */
   --bg-primary: #1f0c0c;
   --bg-secondary: #110606;
   --bg-tertiary: #2d1212;
   --bg-hover: #3e1a1a;
   --bg-active: #522424;

   /* ===== BORDER COLORS ===== */
   --border-light: rgba(201, 151, 62, 0.1);
   --border-default: rgba(201, 151, 62, 0.18);
   --border-medium: rgba(201, 151, 62, 0.3);
   --border-dark: rgba(201, 151, 62, 0.55);

   /* ===== CROSSWORD GRID SPECIFIC ===== */
   --grid-empty-cell: #2d1212;
   --grid-filled-cell: #faf5ed;
   --grid-text-color: #faf5ed;
   --grid-number-color: #c9973e;
   --grid-border-color: #3e1a1a;
   --grid-cell-border: rgba(201, 151, 62, 0.22);

   /* ===== OVERLAY & SHADOW COLORS ===== */
   --overlay-light: rgba(17, 6, 6, 0.4);
   --overlay-medium: rgba(17, 6, 6, 0.65);
   --overlay-dark: rgba(6, 2, 2, 0.88);

   --shadow-sm: 0 2px 6px rgba(6, 2, 2, 0.55);
   --shadow-md: 0 6px 18px rgba(6, 2, 2, 0.5);
   --shadow-lg: 0 12px 30px rgba(6, 2, 2, 0.55);
   --shadow-xl: 0 18px 44px rgba(6, 2, 2, 0.55);
   --shadow-2xl: 0 24px 60px rgba(6, 2, 2, 0.65);

   --shadow-primary: 0 6px 24px rgba(201, 151, 62, 0.35);
   --shadow-success: 0 4px 14px rgba(93, 184, 122, 0.3);
   --shadow-info: 0 4px 14px rgba(122, 173, 219, 0.28);
   --shadow-danger: 0 4px 16px rgba(224, 112, 112, 0.35);

   /* ===== INTERACTIVE ELEMENT COLORS ===== */
   --interactive-bg: rgba(201, 151, 62, 0.1);
   --interactive-border: rgba(201, 151, 62, 0.28);
   --interactive-hover-bg: rgba(201, 151, 62, 0.18);

   /* ===== GRADIENT DEFINITIONS ===== */
   --gradient-primary: linear-gradient(135deg, #1f0c0c 0%, #2d1212 100%);
   --gradient-primary-light: linear-gradient(135deg, rgba(45, 18, 18, 0.7) 0%, rgba(31, 12, 12, 0.7) 100%);
   --gradient-primary-subtle: linear-gradient(135deg, rgba(201, 151, 62, 0.12) 0%, rgba(110, 20, 20, 0.08) 100%);
   --primary-tint: rgba(201, 151, 62, 0.1);
   --primary-tint-2: rgba(110, 20, 20, 0.1);
   --primary-lightest: rgba(201, 151, 62, 0.15);
   --primary-lighter: rgba(201, 151, 62, 0.3);
   --gradient-light: linear-gradient(135deg, #2d1212 0%, #1f0c0c 100%);
}