/* ============================================================
   CompCode Solutions — Design Tokens
   All CSS custom properties. Every other file imports these.
   ============================================================ */

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-bg:           #070d1a;   /* Page background */
  --color-bg-card:      #0f2540;   /* Card / panel background */
  --color-bg-elevated:  #122b47;   /* Slightly lighter card */
  --color-border:       #1e3a5f;   /* Borders, dividers */
  --color-border-light: #24497a;   /* Hover borders */

  --color-blue:         #0ea5e9;   /* Primary accent */
  --color-teal:         #14b8a6;   /* Secondary accent */
  --color-indigo:       #6366f1;   /* AI / badge color */
  --color-green:        #22c55e;   /* Success */
  --color-amber:        #f59e0b;   /* Warning */

  --color-white:        #ffffff;
  --color-gray-50:      #f8fafc;
  --color-gray-100:     #f1f5f9;
  --color-gray-300:     #cbd5e1;
  --color-gray-400:     #94a3b8;
  --color-gray-500:     #64748b;
  --color-gray-600:     #475569;

  /* ── Gradients ────────────────────────────────────────── */
  --gradient-brand:     linear-gradient(135deg, #0ea5e9, #14b8a6);
  --gradient-hero:      linear-gradient(160deg, #070d1a 0%, #0f2540 100%);
  --gradient-cta:       linear-gradient(135deg, #0c1f38 0%, #0f3260 100%);
  --gradient-text:      linear-gradient(135deg, #0ea5e9, #14b8a6);
  --gradient-indigo:    linear-gradient(135deg, #6366f1, #0ea5e9);

  /* ── Typography ───────────────────────────────────────── */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(0.72rem,  1.4vw, 0.8rem);
  --text-sm:   clamp(0.85rem,  1.7vw, 0.9375rem);
  --text-base: clamp(1rem,     2vw,   1.0625rem);
  --text-lg:   clamp(1.125rem, 2.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  3vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,   4vw,   2rem);
  --text-3xl:  clamp(2rem,     5vw,   2.75rem);
  --text-4xl:  clamp(2.5rem,   6vw,   3.5rem);
  --text-5xl:  clamp(3rem,     7vw,   4.5rem);

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4rem, 10vw, 7rem);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:     1200px;
  --container-wide:    1400px;
  --container-narrow:  780px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* ── Borders & Radius ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg:   0 4px 6px rgba(0,0,0,0.3), 0 10px 40px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 40px rgba(14,165,233,0.12);
  --shadow-glow-strong: 0 0 60px rgba(14,165,233,0.22);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   380ms ease;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}