/**
 * Skyseed V7 Design Tokens
 * ========================
 *
 * 3-Layer Token Architecture:
 * - Layer 1: Primitives (raw values, NEVER used by components)
 * - Layer 2: Semantic UI tokens (--ui-*, ONLY these used by components)
 * - Layer 3: Theme overrides via [data-theme="..."] selectors
 *
 * RULE: Components MUST use only --ui-* tokens.
 */

/* ==========================================================================
   LAYER 1: PRIMITIVE TOKENS
   Raw design values. NEVER used directly by components.
   ========================================================================== */

:root {
  /* ----- Color Primitives ----- */
  --white: #ffffff;
  --black: #000000;

  --gray-50: #f8f8f8;
  --gray-100: #f0f0f0;
  --gray-200: #e0e0e0;
  --gray-300: #cccccc;
  --gray-400: #999999;
  --gray-500: #777777;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #333333;
  --gray-900: #1a1a1a;

  --blue-50: #f0f7ff;
  --blue-100: #e8f4ff;
  --blue-200: #c8e1ff;
  --blue-300: #90c4f9;
  --blue-400: #4da3f2;
  --blue-500: #0066cc;
  --blue-600: #0055aa;
  --blue-700: #004499;
  --blue-800: #003377;
  --blue-900: #002255;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #dc2626;
  --red-600: #b91c1c;
  --red-700: #991b1b;

  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-400: #4ade80;
  --green-500: #16a34a;
  --green-600: #15803d;
  --green-700: #166534;

  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;

  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;

  /* ----- Spacing Primitives ----- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----- Border Radius Primitives ----- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ----- Typography Primitives ----- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --weight-thin: 100;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ----- Layout Primitives ----- */
  --width-xs: 320px;
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 1024px;
  --width-xl: 1280px;
  --width-2xl: 1536px;

  /* ----- Z-Index Primitives ----- */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-tooltip: 1100;
}


/* ==========================================================================
   LAYER 2: SEMANTIC UI TOKENS
   Components MUST use only --ui-* tokens.
   ========================================================================== */

:root {
  /* ===== BACKGROUNDS (Default Blue Theme) ===== */
  --ui-bg: #f8faff;
  --ui-bg-muted: #eef4ff;
  --ui-bg-subtle: #dbe8ff;
  --ui-bg-accent: #b8d4ff;
  --ui-bg-inverse: #1a365d;
  --ui-bg-disabled: #e2e8f0;
  --ui-bg-success: #ecfdf5;
  --ui-bg-warning: #fffbeb;
  --ui-bg-error: #fef2f2;

  /* ===== TEXT ===== */
  --ui-text: #1e3a5a;
  --ui-text-muted: #4a6fa5;
  --ui-text-subtle: #7a9cc6;
  --ui-text-inverse: #ffffff;
  --ui-text-disabled: #94a3b8;
  --ui-text-error: var(--red-500);
  --ui-text-success: var(--green-500);
  --ui-text-warning: var(--yellow-600);

  /* ===== LINKS ===== */
  --ui-link: #0055cc;
  --ui-link-hover: #003d99;
  --ui-link-active: #004db3;
  --ui-link-visited: #004499;

  /* ===== BORDERS (Blue Theme) ===== */
  --ui-border: #7ab3ff;
  --ui-border-muted: #a8ccff;
  --ui-border-subtle: #cce0ff;
  --ui-border-hover: #4d94ff;
  --ui-border-focus: #0055cc;
  --ui-border-disabled: #e2e8f0;
  --ui-border-error: var(--red-500);
  --ui-border-success: var(--green-500);

  /* ===== INTERACTION STATES ===== */
  --ui-state-hover-bg: #dbe8ff;
  --ui-state-active-bg: #b8d4ff;
  --ui-state-selected-bg: #93c5fd;
  --ui-state-disabled-opacity: 0.5;
  --ui-state-focus-ring: 0 0 0 2px #b8d4ff, 0 0 0 4px #0055cc;
  --ui-state-focus-ring-inset: inset 0 0 0 2px #0055cc;

  /* ===== SHADOWS (Blue-tinted) ===== */
  --ui-shadow-none: none;
  --ui-shadow-xs: 0 1px 2px rgba(0, 85, 204, 0.08);
  --ui-shadow-sm: 0 1px 3px rgba(0, 85, 204, 0.12);
  --ui-shadow-md: 0 4px 6px rgba(0, 85, 204, 0.15);
  --ui-shadow-lg: 0 10px 15px rgba(0, 85, 204, 0.18);
  --ui-shadow-xl: 0 20px 25px rgba(0, 85, 204, 0.2);
  --ui-shadow-dropdown: 0 4px 12px rgba(0, 85, 204, 0.2);

  /* ===== TYPOGRAPHY - Body ===== */
  --ui-font-body: var(--font-sans);
  --ui-font-heading: var(--font-sans);
  --ui-font-code: var(--font-mono);
  --ui-text-body: var(--text-base);
  --ui-text-small: var(--text-sm);
  --ui-text-tiny: var(--text-xs);
  --ui-text-large: var(--text-lg);
  --ui-leading: var(--leading-normal);
  --ui-weight-normal: var(--weight-normal);
  --ui-weight-medium: var(--weight-medium);
  --ui-weight-bold: var(--weight-bold);

  /* ===== TYPOGRAPHY - Headings ===== */
  --ui-text-h1: var(--text-4xl);
  --ui-text-h2: var(--text-3xl);
  --ui-text-h3: var(--text-2xl);
  --ui-text-h4: var(--text-xl);
  --ui-text-h5: var(--text-lg);
  --ui-text-h6: var(--text-base);
  --ui-leading-heading: var(--leading-tight);
  --ui-weight-heading: var(--weight-bold);

  /* ===== SPACING (Component) ===== */
  --ui-gap-xs: var(--space-1);
  --ui-gap-sm: var(--space-2);
  --ui-gap-md: var(--space-4);
  --ui-gap-lg: var(--space-6);
  --ui-gap-xl: var(--space-8);
  --ui-gap-2xl: var(--space-12);

  /* ===== PADDING (Component) ===== */
  --ui-padding-xs: var(--space-1);
  --ui-padding-sm: var(--space-2);
  --ui-padding-md: var(--space-4);
  --ui-padding-lg: var(--space-6);
  --ui-padding-xl: var(--space-8);

  /* ===== RADIUS ===== */
  --ui-radius-none: var(--radius-none);
  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-md);
  --ui-radius-lg: var(--radius-lg);
  --ui-radius-xl: var(--radius-xl);
  --ui-radius-full: var(--radius-full);

  /* ===== LAYOUT ===== */
  --ui-container-xs: 400px;      /* Small modals, tooltips */
  --ui-container-sm: 540px;      /* Narrow content, alerts */
  --ui-container-md: 800px;      /* Medium content blocks */
  --ui-container-lg: 1100px;     /* Main content area */
  --ui-container-xl: 1280px;     /* Wide layouts */
  --ui-container-full: 100%;     /* Full width responsive */

  /* ==========================================================================
     V7 MASTER WIDTH - "全舰对齐"统一宽度
     所有 Navbar, Main Content, Footer 内部容器必须使用此变量
     ========================================================================== */
  --v7-width: 1200px;

  /* Site-wide unified width (can be overridden by --site-container-width from config) */
  --ui-page-max-width: var(--site-container-width, var(--v7-width));

  /* Icon sizes (tokenized for consistency) */
  --ui-icon-2xs: 8px;
  --ui-icon-xs: 12px;
  --ui-icon-sm: 14px;
  --ui-icon-md: 16px;
  --ui-icon-lg: 24px;
  --ui-icon-xl: 28px;
  --ui-icon-xl-plus: 32px;
  --ui-icon-2xl: 40px;
  --ui-icon-3xl: 48px;
  --ui-icon-4xl: 56px;
  --ui-icon-5xl: 64px;

  /* Element sizes (buttons, badges, etc.) */
  --ui-element-xs: 120px;   /* Min button/nav width */
  --ui-element-sm: 150px;   /* Small element constraint */
  --ui-element-md: 200px;
  --ui-element-lg: 280px;

  /* Content width utilities (App 兼容性) */
  --ui-width-fit: fit-content;   /* 自适应收缩 */
  --ui-width-auto: auto;
  --ui-width-full: 100%;

  --ui-section-gap: var(--space-12);
  --ui-card-gap: var(--space-6);
  --ui-grid-gap: var(--space-4);
  --ui-page-padding: var(--space-4);
  --ui-page-padding-lg: var(--space-6);

  /* ===== Z-INDEX (Semantic) ===== */
  --ui-z-base: var(--z-0);
  --ui-z-dropdown: var(--z-dropdown);
  --ui-z-modal: var(--z-modal);
  --ui-z-tooltip: var(--z-tooltip);

  /* ===== TRANSITIONS ===== */
  --ui-transition-fast: 150ms ease;
  --ui-transition-normal: 200ms ease;
  --ui-transition-slow: 300ms ease;
}


/* ==========================================================================
   LAYER 3: THEME DEFINITIONS
   Theme overrides via [data-theme="..."] selectors.
   ========================================================================== */

/* ===== DEFAULT THEME ===== */
/* ===== DEFAULT (BLUE) THEME ===== */
[data-theme="default"] {
  /* Backgrounds - cool blue tints */
  --ui-bg: #f8faff;
  --ui-bg-muted: #eef4ff;
  --ui-bg-subtle: #dbe8ff;
  --ui-bg-accent: #b8d4ff;
  --ui-bg-inverse: #1a365d;
  --ui-bg-disabled: #e2e8f0;
  --ui-bg-success: #ecfdf5;
  --ui-bg-warning: #fffbeb;
  --ui-bg-error: #fef2f2;

  /* Text */
  --ui-text: #1e3a5a;
  --ui-text-muted: #4a6fa5;
  --ui-text-subtle: #7a9cc6;
  --ui-text-inverse: #ffffff;
  --ui-text-disabled: #94a3b8;

  /* Links - strong blue */
  --ui-link: #0055cc;
  --ui-link-hover: #003d99;
  --ui-link-active: #004db3;
  --ui-link-visited: #004499;

  /* Borders - visible blue */
  --ui-border: #7ab3ff;
  --ui-border-muted: #a8ccff;
  --ui-border-subtle: #cce0ff;
  --ui-border-hover: #4d94ff;
  --ui-border-focus: #0055cc;

  /* Interaction States */
  --ui-state-hover-bg: #dbe8ff;
  --ui-state-active-bg: #b8d4ff;
  --ui-state-selected-bg: #93c5fd;

  /* Shadows - blue tinted */
  --ui-shadow-sm: 0 1px 3px rgba(0, 85, 204, 0.12);
  --ui-shadow-md: 0 4px 6px rgba(0, 85, 204, 0.15);
  --ui-shadow-lg: 0 10px 15px rgba(0, 85, 204, 0.18);
  --ui-shadow-dropdown: 0 4px 12px rgba(0, 85, 204, 0.2);
}

/* ===== FOREST THEME ===== */
[data-theme="forest"] {
  --ui-bg: #f8faf8;
  --ui-bg-muted: #f0f5f0;
  --ui-bg-subtle: #e8f0e8;
  --ui-bg-accent: #dcf0dc;
  --ui-text: #1a3a1a;
  --ui-text-muted: #3d5c3d;
  --ui-link: #2d7d46;
  --ui-link-hover: #1e5c32;
  --ui-border: #b8d4b8;
  --ui-border-muted: #d0e4d0;
}

/* ===== OCEAN THEME ===== */
[data-theme="ocean"] {
  --ui-bg: #f0f9ff;
  --ui-bg-muted: #e6f4ff;
  --ui-bg-subtle: #d9efff;
  --ui-bg-accent: #cceeff;
  --ui-text: #0c3d5c;
  --ui-text-muted: #1e5c7a;
  --ui-link: #0891b2;
  --ui-link-hover: #0e7490;
  --ui-border: #a0d4e8;
  --ui-border-muted: #c0e4f0;
}

/* ===== SUNSET THEME ===== */
[data-theme="sunset"] {
  --ui-bg: #fffaf5;
  --ui-bg-muted: #fff5eb;
  --ui-bg-subtle: #ffedd5;
  --ui-bg-accent: #fed7aa;
  --ui-text: #5c2c0a;
  --ui-text-muted: #7a4a1e;
  --ui-link: #ea580c;
  --ui-link-hover: #c2410c;
  --ui-border: #f5c4a0;
  --ui-border-muted: #fad5b8;
}

/* ===== LAVENDER THEME ===== */
[data-theme="lavender"] {
  --ui-bg: #faf5ff;
  --ui-bg-muted: #f3e8ff;
  --ui-bg-subtle: #ede4ff;
  --ui-bg-accent: #e4d4ff;
  --ui-text: #3b1a5c;
  --ui-text-muted: #5c3d7a;
  --ui-link: #7c3aed;
  --ui-link-hover: #6d28d9;
  --ui-border: #c8a8e8;
  --ui-border-muted: #dcc4f0;
}

/* ===== ROSE THEME ===== */
[data-theme="rose"] {
  --ui-bg: #fdf2f8;
  --ui-bg-muted: #fce7f3;
  --ui-bg-subtle: #fbdaeb;
  --ui-bg-accent: #f9c4dc;
  --ui-text: #5c1a3d;
  --ui-text-muted: #7a3d5c;
  --ui-link: #db2777;
  --ui-link-hover: #be185d;
  --ui-border: #e8a0c0;
  --ui-border-muted: #f0c0d4;
}

/* ===== MINT THEME ===== */
[data-theme="mint"] {
  --ui-bg: #ecfdf5;
  --ui-bg-muted: #d1fae5;
  --ui-bg-subtle: #c4f5dc;
  --ui-bg-accent: #a7f3d0;
  --ui-text: #064e3b;
  --ui-text-muted: #047857;
  --ui-link: #059669;
  --ui-link-hover: #047857;
  --ui-border: #86e8c4;
  --ui-border-muted: #a0f0d4;
}

/* ===== SAND THEME ===== */
[data-theme="sand"] {
  --ui-bg: #fefce8;
  --ui-bg-muted: #fef9c3;
  --ui-bg-subtle: #fef3a0;
  --ui-bg-accent: #fde68a;
  --ui-text: #5c4a0a;
  --ui-text-muted: #7a6a1e;
  --ui-link: #a16207;
  --ui-link-hover: #854d0e;
  --ui-border: #e8d48a;
  --ui-border-muted: #f0e0a8;
}

/* ===== SLATE THEME ===== */
[data-theme="slate"] {
  --ui-bg: #f8fafc;
  --ui-bg-muted: #f1f5f9;
  --ui-bg-subtle: #e2e8f0;
  --ui-bg-accent: #cbd5e1;
  --ui-text: #1e293b;
  --ui-text-muted: #475569;
  --ui-link: #475569;
  --ui-link-hover: #334155;
  --ui-border: #94a3b8;
  --ui-border-muted: #b8c4d0;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  /* Backgrounds */
  --ui-bg: #121212;
  --ui-bg-muted: #1e1e1e;
  --ui-bg-subtle: #2a2a2a;
  --ui-bg-accent: #1e3a5f;
  --ui-bg-inverse: var(--white);
  --ui-bg-disabled: #2a2a2a;
  --ui-bg-success: #132e1b;
  --ui-bg-warning: #2e2a13;
  --ui-bg-error: #2e1313;

  /* Text */
  --ui-text: #e0e0e0;
  --ui-text-muted: #a0a0a0;
  --ui-text-subtle: #707070;
  --ui-text-inverse: var(--gray-800);
  --ui-text-disabled: #505050;

  /* Links */
  --ui-link: #64b5f6;
  --ui-link-hover: #90caf9;
  --ui-link-active: #42a5f5;
  --ui-link-visited: #90caf9;

  /* Borders */
  --ui-border: #404040;
  --ui-border-muted: #303030;
  --ui-border-subtle: #252525;
  --ui-border-hover: #505050;

  /* Interaction States */
  --ui-state-hover-bg: #2a2a2a;
  --ui-state-active-bg: #3a3a3a;
  --ui-state-selected-bg: #1e3a5f;

  /* Shadows */
  --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --ui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
  --ui-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   SITE-SPECIFIC: SUDOKU
   [data-site="sudoku"] tokens for grid, timer, and puzzle components.
   ========================================================================== */

[data-site="sudoku"] {
  /* ======== UI Theme Overrides (Design Spec §1.1) ======== */
  /* Primary: Vibrant Blue */
  --ui-link: #2563eb;
  --ui-link-hover: #1d4ed8;
  --ui-border-focus: #2563eb;

  /* Secondary: Slate for muted elements */
  --ui-text-muted: #475569;
  --ui-border: #cbd5e1;
  --ui-border-muted: #e2e8f0;

  /* Backgrounds - clean, minimal */
  --ui-bg: #ffffff;
  --ui-bg-muted: #f8fafc;
  --ui-bg-subtle: #f1f5f9;

  /* Accent for interactive states */
  --ui-state-hover-bg: #eff6ff;
  --ui-state-selected-bg: #dbeafe;
  --ui-state-error-bg: #fee2e2;

  /* ======== Shadow System (Design Spec §4.1) ======== */
  --ui-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ui-shadow-hover: 0 10px 20px -5px rgb(0 0 0 / 0.15);

  /* ======== Spacing Tokens (Design Spec §4.2) ======== */
  --ui-padding-card: 24px;
  --ui-padding-section: 32px;
  --ui-margin-section: 48px;
  --ui-margin-card: 24px;
  --ui-margin-element: 16px;
  --ui-gap-grid: 24px;
  --ui-gap-inline: 12px;

  /* ======== Brand Colors ======== */
  --sudoku-primary: #2563eb;
  --sudoku-primary-light: #3b82f6;
  --sudoku-primary-dark: #1d4ed8;
  --sudoku-accent: #0ea5e9;

  /* Grid Structure */
  --sudoku-cell-size: 44px;
  --sudoku-cell-size-sm: 36px;
  --sudoku-cell-size-lg: 52px;
  --sudoku-cell-font: 'Inter', var(--font-sans);
  --sudoku-cell-font-size: 20px;
  --sudoku-cell-font-weight: 600;

  /* Grid Borders */
  --sudoku-border-thin: 1px;
  --sudoku-border-thick: 2px;
  --sudoku-border-box: 3px;
  --sudoku-border-color: #334155;
  --sudoku-border-color-light: #94a3b8;
  --sudoku-border-color-box: #1e293b;

  /* Cell States */
  --sudoku-cell-bg: #ffffff;
  --sudoku-cell-bg-given: #f1f5f9;
  --sudoku-cell-bg-selected: #dbeafe;
  --sudoku-cell-bg-highlight: #e0f2fe;
  --sudoku-cell-bg-error: #fee2e2;
  --sudoku-cell-text-given: #1e293b;
  --sudoku-cell-text-user: #2563eb;
  --sudoku-cell-text-error: #dc2626;
  --sudoku-cell-text-pencil: #64748b;

  /* Timer */
  --sudoku-timer-font: 'Poppins', var(--font-sans);
  --sudoku-timer-font-size: 1.5rem;
  --sudoku-timer-color: var(--ui-text);
  --sudoku-timer-bg: var(--ui-bg-muted);

  /* Difficulty Colors */
  --sudoku-easy-color: #22c55e;
  --sudoku-medium-color: #f59e0b;
  --sudoku-hard-color: #ef4444;
  --sudoku-expert-color: #8b5cf6;

  /* Override fonts for sudoku site */
  --ui-font-body: 'Inter', var(--font-sans);
  --ui-font-heading: 'Poppins', var(--font-sans);
}

/* ==========================================================================
   SUDOKU THEME VARIANTS
   10 unique themes for EasySudokuPrint (completely different from site 001)
   ========================================================================== */

/* ===== CLASSIC BLUE (Default for Sudoku) ===== */
[data-site="sudoku"][data-theme="default"] {
  --ui-bg: #f0f7ff;
  --ui-bg-muted: #e0efff;
  --ui-bg-subtle: #d0e7ff;
  --ui-bg-accent: #bfdbfe;
  --ui-text: #1e3a5f;
  --ui-text-muted: #3b5998;
  --ui-link: #2563eb;
  --ui-link-hover: #1d4ed8;
  --ui-border: #93c5fd;
  --ui-border-muted: #bfdbfe;
  --sudoku-primary: #2563eb;
  --sudoku-cell-bg: #ffffff;
  --sudoku-cell-bg-given: #e0efff;
  --sudoku-cell-text-given: #1e3a5f;
  --sudoku-cell-text-user: #2563eb;
  --sudoku-border-color: #3b82f6;
  --sudoku-border-color-light: #93c5fd;
  --sudoku-border-color-box: #1e40af;
}

/* ===== MIDNIGHT ===== */
[data-site="sudoku"][data-theme="midnight"] {
  --ui-bg: #0f172a;
  --ui-bg-muted: #1e293b;
  --ui-bg-subtle: #334155;
  --ui-bg-accent: #475569;
  --ui-text: #e2e8f0;
  --ui-text-muted: #94a3b8;
  --ui-link: #818cf8;
  --ui-link-hover: #a5b4fc;
  --ui-border: #475569;
  --ui-border-muted: #334155;
  --sudoku-primary: #6366f1;
  --sudoku-cell-bg: #1e293b;
  --sudoku-cell-bg-given: #334155;
  --sudoku-cell-text-given: #f1f5f9;
  --sudoku-cell-text-user: #a5b4fc;
  --sudoku-border-color: #64748b;
  --sudoku-border-color-light: #475569;
  --sudoku-border-color-box: #94a3b8;
}

/* ===== PAPER (Vintage/Classic) ===== */
[data-site="sudoku"][data-theme="paper"] {
  --ui-bg: #fafaf9;
  --ui-bg-muted: #f5f5f4;
  --ui-bg-subtle: #e7e5e4;
  --ui-bg-accent: #d6d3d1;
  --ui-text: #44403c;
  --ui-text-muted: #78716c;
  --ui-link: #78716c;
  --ui-link-hover: #57534e;
  --ui-border: #a8a29e;
  --ui-border-muted: #d6d3d1;
  --sudoku-primary: #57534e;
  --sudoku-cell-bg: #fffbf5;
  --sudoku-cell-bg-given: #f5f5f4;
  --sudoku-cell-text-given: #292524;
  --sudoku-cell-text-user: #57534e;
  --sudoku-border-color: #78716c;
  --sudoku-border-color-light: #a8a29e;
  --sudoku-border-color-box: #44403c;
}

/* ===== NEON (Cyberpunk) ===== */
[data-site="sudoku"][data-theme="neon"] {
  /* Deep purple-black background for cyberpunk feel */
  --ui-bg: #0f172a;
  --ui-bg-muted: #1e1b4b;
  --ui-bg-subtle: #312e81;
  --ui-bg-accent: #4c1d95;
  /* Fluorescent text colors */
  --ui-text: #00f2ff;
  --ui-text-muted: #c4b5fd;
  --ui-link: #ff00e5;
  --ui-link-hover: #00f2ff;
  --ui-border: #a855f7;
  --ui-border-muted: #7c3aed;
  /* Sudoku-specific neon colors */
  --sudoku-primary: #ff00e5;
  --sudoku-cell-bg: #1e1b4b;
  --sudoku-cell-bg-given: #312e81;
  --sudoku-cell-text-given: #00f2ff;
  --sudoku-cell-text-user: #ff00e5;
  --sudoku-border-color: #a855f7;
  --sudoku-border-color-light: #7c3aed;
  --sudoku-border-color-box: #ff00e5;
  /* Neon glow accent color for buttons */
  --neon-glow: #a855f7;
  --neon-glow-strong: #ff00e5;
}

/* ===== EARTH (Natural/Warm) ===== */
[data-site="sudoku"][data-theme="earth"] {
  --ui-bg: #faf9f6;
  --ui-bg-muted: #f5f3ef;
  --ui-bg-subtle: #e8e4dd;
  --ui-bg-accent: #d4cfc5;
  --ui-text: #44403c;
  --ui-text-muted: #78716c;
  --ui-link: #92400e;
  --ui-link-hover: #78350f;
  --ui-border: #a8a29e;
  --ui-border-muted: #d6d3d1;
  --sudoku-primary: #92400e;
  --sudoku-cell-bg: #fffcf5;
  --sudoku-cell-bg-given: #fef3c7;
  --sudoku-cell-text-given: #451a03;
  --sudoku-cell-text-user: #92400e;
  --sudoku-border-color: #92400e;
  --sudoku-border-color-light: #d6d3d1;
  --sudoku-border-color-box: #78350f;
}

/* ===== ICE (Cool/Fresh) ===== */
[data-site="sudoku"][data-theme="ice"] {
  --ui-bg: #ecfeff;
  --ui-bg-muted: #cffafe;
  --ui-bg-subtle: #a5f3fc;
  --ui-bg-accent: #67e8f9;
  --ui-text: #164e63;
  --ui-text-muted: #0e7490;
  --ui-link: #06b6d4;
  --ui-link-hover: #0891b2;
  --ui-border: #22d3ee;
  --ui-border-muted: #67e8f9;
  --sudoku-primary: #06b6d4;
  --sudoku-cell-bg: #ffffff;
  --sudoku-cell-bg-given: #cffafe;
  --sudoku-cell-text-given: #155e75;
  --sudoku-cell-text-user: #06b6d4;
  --sudoku-border-color: #0891b2;
  --sudoku-border-color-light: #22d3ee;
  --sudoku-border-color-box: #0e7490;
}

/* ===== CHERRY (Bold Red) ===== */
[data-site="sudoku"][data-theme="cherry"] {
  --ui-bg: #fff1f2;
  --ui-bg-muted: #ffe4e6;
  --ui-bg-subtle: #fecdd3;
  --ui-bg-accent: #fda4af;
  --ui-text: #881337;
  --ui-text-muted: #be123c;
  --ui-link: #e11d48;
  --ui-link-hover: #be123c;
  --ui-border: #fb7185;
  --ui-border-muted: #fda4af;
  --sudoku-primary: #e11d48;
  --sudoku-cell-bg: #ffffff;
  --sudoku-cell-bg-given: #ffe4e6;
  --sudoku-cell-text-given: #9f1239;
  --sudoku-cell-text-user: #e11d48;
  --sudoku-border-color: #e11d48;
  --sudoku-border-color-light: #fb7185;
  --sudoku-border-color-box: #be123c;
}

/* ===== BAMBOO (Green/Zen) ===== */
[data-site="sudoku"][data-theme="bamboo"] {
  --ui-bg: #f0fdf4;
  --ui-bg-muted: #dcfce7;
  --ui-bg-subtle: #bbf7d0;
  --ui-bg-accent: #86efac;
  --ui-text: #14532d;
  --ui-text-muted: #166534;
  --ui-link: #15803d;
  --ui-link-hover: #166534;
  --ui-border: #4ade80;
  --ui-border-muted: #86efac;
  --sudoku-primary: #15803d;
  --sudoku-cell-bg: #ffffff;
  --sudoku-cell-bg-given: #dcfce7;
  --sudoku-cell-text-given: #14532d;
  --sudoku-cell-text-user: #15803d;
  --sudoku-border-color: #16a34a;
  --sudoku-border-color-light: #4ade80;
  --sudoku-border-color-box: #15803d;
}

/* ===== GOLD (Luxury/Premium) ===== */
[data-site="sudoku"][data-theme="gold"] {
  --ui-bg: #fefce8;
  --ui-bg-muted: #fef9c3;
  --ui-bg-subtle: #fef08a;
  --ui-bg-accent: #fde047;
  --ui-text: #713f12;
  --ui-text-muted: #a16207;
  --ui-link: #ca8a04;
  --ui-link-hover: #a16207;
  --ui-border: #facc15;
  --ui-border-muted: #fde047;
  --sudoku-primary: #ca8a04;
  --sudoku-cell-bg: #fffef5;
  --sudoku-cell-bg-given: #fef9c3;
  --sudoku-cell-text-given: #713f12;
  --sudoku-cell-text-user: #ca8a04;
  --sudoku-border-color: #eab308;
  --sudoku-border-color-light: #facc15;
  --sudoku-border-color-box: #ca8a04;
}

/* ===== GRAPHITE (Modern/Minimal) ===== */
[data-site="sudoku"][data-theme="graphite"] {
  /* Dark charcoal/graphite theme - professional and calm */
  --ui-bg: #1f2937;
  --ui-bg-muted: #374151;
  --ui-bg-subtle: #4b5563;
  --ui-bg-accent: #6b7280;
  --ui-text: #f9fafb;
  --ui-text-muted: #d1d5db;
  --ui-link: #9ca3af;
  --ui-link-hover: #f9fafb;
  --ui-border: #6b7280;
  --ui-border-muted: #4b5563;
  /* Sudoku-specific graphite colors */
  --sudoku-primary: #9ca3af;
  --sudoku-cell-bg: #374151;
  --sudoku-cell-bg-given: #4b5563;
  --sudoku-cell-text-given: #f9fafb;
  --sudoku-cell-text-user: #d1d5db;
  --sudoku-border-color: #6b7280;
  --sudoku-border-color-light: #4b5563;
  --sudoku-border-color-box: #9ca3af;
}

/* ==========================================================================
   PRINT OVERRIDES
   Force high-contrast for printing.
   ========================================================================== */

@media print {
  :root,
  [data-theme] {
    --ui-bg: var(--white);
    --ui-bg-muted: var(--white);
    --ui-bg-subtle: var(--white);
    --ui-text: var(--black);
    --ui-text-muted: var(--gray-700);
    --ui-border: var(--gray-400);
    --ui-shadow-sm: var(--ui-shadow-none);
    --ui-shadow-md: var(--ui-shadow-none);
    --ui-shadow-lg: var(--ui-shadow-none);
  }
}