/* ==========================================================================
   ComicanaaPixel Design System - Core Tokens
   Theme: Obsidian Dark Glass, Matte Carbon & Glowing Amber Neon (Reference Spec)
   ========================================================================== */

:root {
  /* Surfaces - Obsidian Dark Palette */
  --bg-primary: #0A0B0E;          /* Deep Pitch Obsidian */
  --bg-secondary: #101217;        /* Secondary Dark Canvas */
  --bg-surface: #141720;          /* Raised Card Surface */
  --bg-surface-elevated: #1A1E2B;  /* Elevated Card Surface */
  --bg-surface-glass: rgba(18, 21, 29, 0.82);
  --bg-card: #151822;             /* Matte Carbon Card */
  --bg-card-hover: #1C202E;
  --bg-panel: #11141C;

  /* Text & Typography - Crisp High Contrast */
  --text-primary: #FAF8F5;        /* Crisp Ivory White */
  --text-light: #FFFFFF;
  --text-secondary: #A6ADBB;      /* Technical Silver / Slate */
  --text-tertiary: #717A8C;       /* Metadata / Subdued */
  --text-muted: #8E98A8;
  --text-quaternary: #4D5566;
  --text-inverse: #0A0B0E;

  /* Accent & Glow Tokens - Signature Glowing Amber */
  --accent-amber: #E66005;        /* Signature Glowing Amber/Orange */
  --accent-amber-hover: #FF7315;
  --accent-amber-glow: rgba(230, 96, 5, 0.4);
  --accent-amber-subtle: rgba(230, 96, 5, 0.12);
  --accent-amber-line: #F5781E;
  --color-accent: #E66005;

  --brand-blue: #1A56DB;          /* Telemetry Blue */
  --brand-blue-glow: rgba(26, 86, 219, 0.35);
  --brand-blue-subtle: rgba(26, 86, 219, 0.12);
  --color-blue: #3B82F6;

  --color-emerald: #10B981;
  --state-success: #10B981;
  --state-success-bg: rgba(16, 185, 129, 0.12);
  --state-warning: #F59E0B;
  --state-warning-bg: rgba(245, 158, 11, 0.12);
  --state-exception: #EF4444;
  --state-exception-bg: rgba(239, 68, 68, 0.12);

  /* Precision Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-amber: rgba(230, 96, 5, 0.45);
  --border-amber-glow: 0 0 16px rgba(230, 96, 5, 0.35);

  /* Glassmorphism & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px -8px rgba(0, 0, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 72px -12px rgba(0, 0, 0, 0.85);
  --shadow-amber-halo: 0 0 32px rgba(230, 96, 5, 0.25), 0 0 8px rgba(230, 96, 5, 0.4);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Scale */
  --text-hero: clamp(2.8rem, 6vw, 4.75rem);
  --text-h1: clamp(2rem, 4vw, 3.125rem);
  --text-h2: clamp(1.5rem, 2.8vw, 2.25rem);
  --text-h3: clamp(1.15rem, 1.8vw, 1.45rem);
  --text-body-lg: 1.125rem;
  --text-body: 0.965rem;
  --text-body-sm: 0.845rem;
  --text-xs: 0.75rem;
  --text-mono-label: 0.6875rem;

  /* Layout Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Transitions */
  --trans-fast: 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-medium: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}