/* ═════════════════════════════════════════════════════════════════════
   VOLREON AI — CENTRAL DESIGN SYSTEM TOKENS (tokens.css)
   Strict 8px Grid • Deep Obsidian Theme • Single Disciplined Accent
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. COLOR PALETTE: DEEP OBSIDIAN & TITANIUM ACCENTS ── */
  --bg-void: #080b11;             /* Pure deep void background */
  --bg-surface: #0d121c;          /* Level 1 alternate section background */
  --bg-surface-elevated: #131a27; /* Cards & content container surface */
  --bg-surface-hover: #182234;    /* Interactive card hover surface */
  --bg-surface-active: #1e2a40;   /* Active state */

  /* Text Contrast Hierarchy (AA & AAA Compliant) */
  --text-primary: #f8fafc;        /* 100% High-contrast white for headings */
  --text-secondary: #94a3b8;      /* 60% Refined slate for body text */
  --text-muted: #64748b;          /* 40% Metadata, labels & timestamps */
  --text-inverse: #080b11;        /* Inverted text on light/accent buttons */

  /* Single Disciplined Accent (Electric Indigo) */
  --accent-primary: #6366f1;      /* Pure CTA, active status & focus ring */
  --accent-hover: #4f46e5;        /* Hover transition */
  --accent-subtle: rgba(99, 102, 241, 0.12); /* Subtle glow / badge backdrop */
  --accent-glow: rgba(99, 102, 241, 0.25);   /* Ambient button aura */
  
  /* Status Colors */
  --status-emerald: #10b981;
  --status-emerald-subtle: rgba(16, 185, 129, 0.12);
  --status-amber: #f59e0b;
  --status-rose: #f43f5e;
  --status-cyan: #06b6d4;

  /* Micro-Borders (1px Subtle Alpha) */
  --border-subtle: rgba(255, 255, 255, 0.08); /* 8% opacity default border */
  --border-medium: rgba(255, 255, 255, 0.14); /* 14% card border */
  --border-focus: rgba(99, 102, 241, 0.5);    /* Focus ring */
  --border-strong: rgba(255, 255, 255, 0.22); /* Active / hover border */

  /* ── 2. TYPOGRAPHY HIERARCHY (MAX 2 FAMILIES) ── */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Tek aralikli font YALNIZCA sayisal alanlarda kullanilir: fiyat
     sutunlari, saat/zaman kodlari, kotalar. Rakamlarin alt alta
     hizalanmasi orada ise yariyor.
     Metin etiketleri (bolum ust basliklari, rozetler, kart etiketleri)
     site fontunu kullanir; mono'da amator duruyorlardi. */
  --font-mono: 'JetBrains Mono', monospace;

  /* ── 3. SPACING SCALE (8px BASE) ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --space-section: 140px;         /* Desktop vertical padding between sections */

  /* ── 4. GEOMETRY & RADIUS ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── 5. DIFFUSE AMBIENT SHADOWS ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.25);

  /* ── 6. TRANSITIONS & TIMINGS ── */
  --transition-fast: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Container Boundaries */
  --container-max: 1240px;
}