/* ==========================================================================
   UNIVERSALCODEMAKER V2 — THEME TOKENS
   Design System: Neubrutalist Precision Optical Studio
   Tailored for Code Makers: Optical Laser Crimson, Signal Blue, Carbon Ink
   ========================================================================== */

/* --- Self-hosted fonts (latin subset, variable weight; see assets/fonts/README.txt) --- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Canvas & Neutral Surfaces --- */
  --canvas-base: #f7f8fa;
  --surface: #ffffff;
  --surface-alt: #f0f2f6;
  --surface-elevated: #ffffff;

  /* --- Carbon Ink & Typography --- */
  --ink-black: #0f1117;
  --ink-secondary: #3e4452;
  --ink-muted: #6b7280;
  --text-primary: var(--ink-black);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--ink-muted);
  --text-inverse: #ffffff;

  /* --- Tailored Code Maker Accents --- */
  /* Laser Crimson: Scanner beam, primary calls to action, active alerts */
  --scanner-laser: #ff2a4b;
  --scanner-laser-hover: #ff4763;
  --scanner-laser-dark: #d91b39;
  --scanner-laser-tint: #ffe9ec;

  /* Precision Signal Blue: Structure, format tabs, active selections */
  --optic-blue: #0066f5;
  --optic-blue-hover: #1f7aff;
  --optic-blue-dark: #004ecc;
  --optic-blue-tint: #ebf3ff;

  /* Sensor Green: Checksum verified, GS1 valid, high scan-ability */
  --sensor-green: #00a86b;
  --sensor-green-hover: #05be7c;
  --sensor-green-dark: #008554;
  --sensor-green-tint: #e6f7f0;

  /* Warning Amber: Low contrast warnings, checksum mismatches */
  --optic-amber: #e67e00;
  --optic-amber-tint: #fff4e5;

  /* --- Tactile Neubrutalist Borders & Shadows --- */
  --border-width: 2.5px;
  --border-ink: 2.5px solid var(--ink-black);
  --border-subtle: 1.5px solid rgba(15, 17, 23, 0.15);
  --border-blue: 2.5px solid var(--optic-blue);
  --border-laser: 2.5px solid var(--scanner-laser);
  
  --shadow-ink: 4px 4px 0 var(--ink-black);
  --shadow-ink-lg: 6px 6px 0 var(--ink-black);
  --shadow-laser: 4px 4px 0 var(--scanner-laser);
  --shadow-laser-lg: 6px 6px 0 var(--scanner-laser);
  --shadow-blue: 4px 4px 0 var(--optic-blue);
  --shadow-blue-lg: 6px 6px 0 var(--optic-blue);

  /* --- Radius Scale --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* --- Typography --- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Dot Grid Matrix Texture --- */
  --dot-grid-color: rgba(15, 17, 23, 0.08);
  --dot-grid-size: 24px;

  /* --- Interactive Physics --- */
  --transition-tactile: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.14s ease, background 0.18s ease;

  /* --- Semantic Aliases (used by content pages & v2-pages.css) --- */
  --border: #0f1117;
  --border-color: var(--border); /* legacy name used by generated pages/ and v2-studio.css */
  --accent: var(--optic-blue);
  --accent-hover: var(--optic-blue-dark);
  --accent-tint: var(--optic-blue-tint);
  --on-accent: #ffffff;
  --accent-text: var(--optic-blue-dark);
  --accent-fill: #d91b39;       /* per-accent overrides below */
  --accent-fill-hover: #b9102b;
  --font-heading: var(--font-display);

  /* Text-safe status colors (>= 4.5:1 on surface / tint backgrounds) */
  --laser-text: color-mix(in srgb, var(--scanner-laser-dark) 85%, #000);
  --sensor-green-text: #047857;
  --optic-amber-text: #b45309;
  --violet: #6d28d9;
  --violet-tint: #f3edff;
}

/* --- Dark Theme: "Obsidian Laser" --- */
[data-theme="dark"] {
  --canvas-base: #0a0c10;
  --surface: #12151d;
  --surface-alt: #1a1e29;
  --surface-elevated: #222736;

  --ink-black: #f0f3fa;
  --ink-secondary: #c5cbd8;
  --ink-muted: #8b95a8;
  --text-primary: #f0f3fa;
  --text-secondary: #c5cbd8;
  --text-muted: #8b95a8;
  --text-inverse: #0a0c10;

  --scanner-laser: #ff3b5c;
  --scanner-laser-hover: #ff5472;
  --scanner-laser-dark: #e02444;
  --scanner-laser-tint: rgba(255, 59, 92, 0.15);

  --optic-blue: #3b82f6;
  --optic-blue-hover: #60a5fa;
  --optic-blue-dark: #2563eb;
  --optic-blue-tint: rgba(59, 130, 246, 0.15);

  --sensor-green: #10b981;
  --sensor-green-hover: #34d399;
  --sensor-green-dark: #059669;
  --sensor-green-tint: rgba(16, 185, 129, 0.15);

  --border-ink: 2.5px solid #2e3547;
  --border-subtle: 1.5px solid rgba(240, 243, 250, 0.14);
  
  --shadow-ink: 4px 4px 0 #2e3547;
  --shadow-ink-lg: 6px 6px 0 #2e3547;
  --shadow-laser: 4px 4px 0 #ff3b5c;
  --shadow-laser-lg: 6px 6px 0 #ff3b5c;
  --shadow-blue: 4px 4px 0 #3b82f6;
  --shadow-blue-lg: 6px 6px 0 #3b82f6;

  --dot-grid-color: rgba(255, 255, 255, 0.05);

  --optic-amber: #f59e0b;
  --optic-amber-tint: rgba(245, 158, 11, 0.16);

  --border: #2e3547;
  --accent-hover: var(--optic-blue-hover);
  --on-accent: #0a0c10;
  --accent-text: var(--optic-blue-hover);

  --laser-text: var(--scanner-laser);
  --sensor-green-text: #34d399;
  --optic-amber-text: #fbbf24;
  --violet: #a78bfa;
  --violet-tint: rgba(167, 139, 250, 0.16);
}

/* ==========================================================================
   Tactical Optics Accent Variations
   Consistent Theme Palette (Primary Action + Structure/Tabs/Focus/Shadows)
   ========================================================================== */

/* 1. Laser Crimson (Default Tactical Optical Red) */
:root[data-accent="crimson"], [data-theme="light"][data-accent="crimson"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #d91b39;
  --accent-fill-hover: #b9102b;
  --scanner-laser: #ff2a4b;
  --scanner-laser-hover: #ff4763;
  --scanner-laser-dark: #d91b39;
  --scanner-laser-tint: #ffe9ec;
  --shadow-laser: 4px 4px 0 #ff2a4b;
  --shadow-laser-lg: 6px 6px 0 #ff2a4b;
  --border-laser: 2.5px solid #ff2a4b;

  --optic-blue: #d91b39;
  --optic-blue-hover: #ff4763;
  --optic-blue-dark: #b9102b;
  --optic-blue-tint: #ffe9ec;
  --shadow-blue: 4px 4px 0 #d91b39;
  --shadow-blue-lg: 6px 6px 0 #d91b39;
  --border-blue: 2.5px solid #d91b39;
}
[data-theme="dark"][data-accent="crimson"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #d91b39;
  --accent-fill-hover: #b9102b;
  --scanner-laser: #ff3b5c;
  --scanner-laser-hover: #ff5472;
  --scanner-laser-dark: #e02444;
  --scanner-laser-tint: rgba(255, 59, 92, 0.18);
  --shadow-laser: 4px 4px 0 #ff3b5c;
  --shadow-laser-lg: 6px 6px 0 #ff3b5c;
  --border-laser: 2.5px solid #ff3b5c;

  --optic-blue: #ff3b5c;
  --optic-blue-hover: #ff5472;
  --optic-blue-dark: #e02444;
  --optic-blue-tint: rgba(255, 59, 92, 0.18);
  --shadow-blue: 4px 4px 0 #ff3b5c;
  --shadow-blue-lg: 6px 6px 0 #ff3b5c;
  --border-blue: 2.5px solid #ff3b5c;
}

/* 2. Signal Cobalt (Precision High-Contrast Blue) */
:root[data-accent="cobalt"], [data-theme="light"][data-accent="cobalt"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #0066f5;
  --accent-fill-hover: #004ecc;
  --scanner-laser: #0066f5;
  --scanner-laser-hover: #1f7aff;
  --scanner-laser-dark: #004ecc;
  --scanner-laser-tint: #ebf3ff;
  --shadow-laser: 4px 4px 0 #0066f5;
  --shadow-laser-lg: 6px 6px 0 #0066f5;
  --border-laser: 2.5px solid #0066f5;

  --optic-blue: #0066f5;
  --optic-blue-hover: #1f7aff;
  --optic-blue-dark: #004ecc;
  --optic-blue-tint: #ebf3ff;
  --shadow-blue: 4px 4px 0 #0066f5;
  --shadow-blue-lg: 6px 6px 0 #0066f5;
  --border-blue: 2.5px solid #0066f5;
}
[data-theme="dark"][data-accent="cobalt"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #0066f5;
  --accent-fill-hover: #004ecc;
  --scanner-laser: #3b82f6;
  --scanner-laser-hover: #60a5fa;
  --scanner-laser-dark: #2563eb;
  --scanner-laser-tint: rgba(59, 130, 246, 0.2);
  --shadow-laser: 4px 4px 0 #3b82f6;
  --shadow-laser-lg: 6px 6px 0 #3b82f6;
  --border-laser: 2.5px solid #3b82f6;

  --optic-blue: #3b82f6;
  --optic-blue-hover: #60a5fa;
  --optic-blue-dark: #2563eb;
  --optic-blue-tint: rgba(59, 130, 246, 0.2);
  --shadow-blue: 4px 4px 0 #3b82f6;
  --shadow-blue-lg: 6px 6px 0 #3b82f6;
  --border-blue: 2.5px solid #3b82f6;
}

/* 3. Cyber Amber (Industrial Caution Amber) */
:root[data-accent="amber"], [data-theme="light"][data-accent="amber"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #c2410c;
  --accent-fill-hover: #9a3412;
  --scanner-laser: #ea580c;
  --scanner-laser-hover: #f97316;
  --scanner-laser-dark: #c2410c;
  --scanner-laser-tint: #fff7ed;
  --shadow-laser: 4px 4px 0 #ea580c;
  --shadow-laser-lg: 6px 6px 0 #ea580c;
  --border-laser: 2.5px solid #ea580c;

  --optic-blue: #c2410c;
  --optic-blue-hover: #ea580c;
  --optic-blue-dark: #9a3412;
  --optic-blue-tint: #fff7ed;
  --shadow-blue: 4px 4px 0 #ea580c;
  --shadow-blue-lg: 6px 6px 0 #ea580c;
  --border-blue: 2.5px solid #ea580c;
}
[data-theme="dark"][data-accent="amber"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #c2410c;
  --accent-fill-hover: #9a3412;
  --scanner-laser: #f59e0b;
  --scanner-laser-hover: #fbbf24;
  --scanner-laser-dark: #d97706;
  --scanner-laser-tint: rgba(245, 158, 11, 0.2);
  --shadow-laser: 4px 4px 0 #f59e0b;
  --shadow-laser-lg: 6px 6px 0 #f59e0b;
  --border-laser: 2.5px solid #f59e0b;

  --optic-blue: #f59e0b;
  --optic-blue-hover: #fbbf24;
  --optic-blue-dark: #d97706;
  --optic-blue-tint: rgba(245, 158, 11, 0.2);
  --shadow-blue: 4px 4px 0 #f59e0b;
  --shadow-blue-lg: 6px 6px 0 #f59e0b;
  --border-blue: 2.5px solid #f59e0b;
}

/* 4. Matrix Emerald (Sensor OLED Emerald) */
:root[data-accent="emerald"], [data-theme="light"][data-accent="emerald"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #047857;
  --accent-fill-hover: #065f46;
  --scanner-laser: #059669;
  --scanner-laser-hover: #10b981;
  --scanner-laser-dark: #047857;
  --scanner-laser-tint: #ecfdf5;
  --shadow-laser: 4px 4px 0 #059669;
  --shadow-laser-lg: 6px 6px 0 #059669;
  --border-laser: 2.5px solid #059669;

  --optic-blue: #047857;
  --optic-blue-hover: #059669;
  --optic-blue-dark: #065f46;
  --optic-blue-tint: #ecfdf5;
  --shadow-blue: 4px 4px 0 #059669;
  --shadow-blue-lg: 6px 6px 0 #059669;
  --border-blue: 2.5px solid #059669;
}
[data-theme="dark"][data-accent="emerald"] {
  /* Filled buttons with white text: deep enough for >= 4.5:1 in both themes */
  --accent-fill: #047857;
  --accent-fill-hover: #065f46;
  --scanner-laser: #10b981;
  --scanner-laser-hover: #34d399;
  --scanner-laser-dark: #059669;
  --scanner-laser-tint: rgba(16, 185, 129, 0.2);
  --shadow-laser: 4px 4px 0 #10b981;
  --shadow-laser-lg: 6px 6px 0 #10b981;
  --border-laser: 2.5px solid #10b981;

  --optic-blue: #10b981;
  --optic-blue-hover: #34d399;
  --optic-blue-dark: #059669;
  --optic-blue-tint: rgba(16, 185, 129, 0.2);
  --shadow-blue: 4px 4px 0 #10b981;
  --shadow-blue-lg: 6px 6px 0 #10b981;
  --border-blue: 2.5px solid #10b981;
}