/*  ═══════════════════════════════════════════════════════════════
    Design Tokens — CSS Custom Properties
    All colors, typography, spacing, and breakpoints live here.
    Tweak this file to reskin the entire app.
    ═══════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="asiimov"] {
  /* ── Color Palette (CS:GO Asiimov Inspired) ─────────────────── */
  --color-bg-primary:     #0e1116;
  --color-bg-secondary:   #171c24;
  --color-bg-elevated:    #1f2631;
  --color-bg-glass:       rgba(255, 255, 255, 0.06);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.12);

  --color-surface:        #2a323f;
  --color-border:         rgba(255, 255, 255, 0.16);
  --color-border-hover:   rgba(255, 255, 255, 0.3);

  --color-text-primary:   #f8fafc;
  --color-text-secondary: #d7dee7;
  --color-text-muted:     #a4afbc;

  /* Accent — Asiimov orange */
  --color-accent:         #ff7a1a;
  --color-accent-hover:   #f06c0f;
  --color-accent-glow:    rgba(255, 122, 26, 0.32);
  --color-accent-2:       #ffb04d;
  --color-accent-gradient: linear-gradient(135deg, #ff7a1a 0%, #ffb04d 100%);

  /* Semantic */
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;

  /* ── Theme Surface Helpers ──────────────────────────────────── */
  --color-nav-bg:         rgba(14, 17, 22, 0.82);
  --color-nav-mobile-bg:  rgba(14, 17, 22, 0.95);
  --color-panel-bg:       rgba(23, 28, 36, 0.98);
  --color-soft-fill:      rgba(255, 255, 255, 0.08);
  --color-soft-fill-2:    rgba(255, 255, 255, 0.14);
  --color-focus-ring:     rgba(255, 122, 26, 0.25);
  --color-hero-badge-bg:  rgba(255, 255, 255, 0.08);
  --color-bg-orb-1:       rgba(255, 122, 26, 0.14);
  --color-bg-orb-2:       rgba(255, 176, 77, 0.11);
  --color-bg-orb-3:       rgba(255, 122, 26, 0.08);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        2rem;       /* 32px */
  --font-size-4xl:        2.5rem;     /* 40px */
  --font-size-5xl:        3.5rem;     /* 56px */

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

  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-sm:  0.5rem;    /* 8px */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  0.875rem;  /* 14px */
  --radius-xl:  1.125rem;  /* 18px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(2, 6, 23, 0.25);
  --shadow-md:   0 10px 24px rgba(2, 6, 23, 0.3);
  --shadow-lg:   0 20px 48px rgba(2, 6, 23, 0.45);
  --shadow-glow: 0 0 36px var(--color-accent-glow);

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:     1200px;
  --navbar-height: 4rem;
}

:root[data-theme="midnight"] {
  --color-bg-primary:     #0b1220;
  --color-bg-secondary:   #111b2e;
  --color-bg-elevated:    #16243c;
  --color-bg-glass:       rgba(255, 255, 255, 0.06);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.13);
  --color-surface:        #1c2d49;
  --color-border:         rgba(148, 163, 184, 0.25);
  --color-border-hover:   rgba(148, 163, 184, 0.45);
  --color-text-primary:   #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #93a4bf;
  --color-accent:         #5d86ff;
  --color-accent-hover:   #4b74eb;
  --color-accent-glow:    rgba(93, 134, 255, 0.3);
  --color-accent-2:       #38bdf8;
  --color-accent-gradient: linear-gradient(135deg, #5d86ff 0%, #38bdf8 100%);
  --color-nav-bg:         rgba(11, 18, 32, 0.82);
  --color-nav-mobile-bg:  rgba(11, 18, 32, 0.95);
  --color-panel-bg:       rgba(17, 27, 46, 0.98);
  --color-soft-fill:      rgba(148, 163, 184, 0.08);
  --color-soft-fill-2:    rgba(148, 163, 184, 0.14);
  --color-focus-ring:     rgba(93, 134, 255, 0.25);
  --color-hero-badge-bg:  rgba(148, 163, 184, 0.12);
  --color-bg-orb-1:       rgba(93, 134, 255, 0.14);
  --color-bg-orb-2:       rgba(56, 189, 248, 0.11);
  --color-bg-orb-3:       rgba(93, 134, 255, 0.08);
}

:root[data-theme="graphite"] {
  --color-bg-primary:     #101215;
  --color-bg-secondary:   #171b21;
  --color-bg-elevated:    #1d232b;
  --color-bg-glass:       rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.11);
  --color-surface:        #262d38;
  --color-border:         rgba(255, 255, 255, 0.14);
  --color-border-hover:   rgba(255, 255, 255, 0.3);
  --color-text-primary:   #f3f4f6;
  --color-text-secondary: #d1d5db;
  --color-text-muted:     #9ca3af;
  --color-accent:         #22c55e;
  --color-accent-hover:   #16a34a;
  --color-accent-glow:    rgba(34, 197, 94, 0.25);
  --color-accent-2:       #4ade80;
  --color-accent-gradient: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
  --color-nav-bg:         rgba(16, 18, 21, 0.86);
  --color-nav-mobile-bg:  rgba(16, 18, 21, 0.96);
  --color-panel-bg:       rgba(23, 27, 33, 0.98);
  --color-soft-fill:      rgba(255, 255, 255, 0.06);
  --color-soft-fill-2:    rgba(255, 255, 255, 0.12);
  --color-focus-ring:     rgba(34, 197, 94, 0.22);
  --color-hero-badge-bg:  rgba(255, 255, 255, 0.08);
  --color-bg-orb-1:       rgba(34, 197, 94, 0.1);
  --color-bg-orb-2:       rgba(74, 222, 128, 0.08);
  --color-bg-orb-3:       rgba(34, 197, 94, 0.06);
}

:root[data-theme="cyber"] {
  --color-bg-primary:     #0a0d18;
  --color-bg-secondary:   #0f1430;
  --color-bg-elevated:    #141b3c;
  --color-bg-glass:       rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.11);
  --color-surface:        #1a2352;
  --color-border:         rgba(139, 92, 246, 0.3);
  --color-border-hover:   rgba(139, 92, 246, 0.55);
  --color-text-primary:   #eef2ff;
  --color-text-secondary: #dbeafe;
  --color-text-muted:     #a5b4fc;
  --color-accent:         #8b5cf6;
  --color-accent-hover:   #7c3aed;
  --color-accent-glow:    rgba(139, 92, 246, 0.3);
  --color-accent-2:       #22d3ee;
  --color-accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
  --color-nav-bg:         rgba(10, 13, 24, 0.86);
  --color-nav-mobile-bg:  rgba(10, 13, 24, 0.96);
  --color-panel-bg:       rgba(15, 20, 48, 0.98);
  --color-soft-fill:      rgba(255, 255, 255, 0.07);
  --color-soft-fill-2:    rgba(255, 255, 255, 0.14);
  --color-focus-ring:     rgba(139, 92, 246, 0.24);
  --color-hero-badge-bg:  rgba(255, 255, 255, 0.08);
  --color-bg-orb-1:       rgba(139, 92, 246, 0.14);
  --color-bg-orb-2:       rgba(34, 211, 238, 0.1);
  --color-bg-orb-3:       rgba(139, 92, 246, 0.06);
}

:root[data-theme="forest"] {
  --color-bg-primary:     #0d1511;
  --color-bg-secondary:   #142019;
  --color-bg-elevated:    #1a2b20;
  --color-bg-glass:       rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.11);
  --color-surface:        #223529;
  --color-border:         rgba(134, 239, 172, 0.2);
  --color-border-hover:   rgba(134, 239, 172, 0.4);
  --color-text-primary:   #f0fdf4;
  --color-text-secondary: #dcfce7;
  --color-text-muted:     #86efac;
  --color-accent:         #22c55e;
  --color-accent-hover:   #16a34a;
  --color-accent-glow:    rgba(34, 197, 94, 0.3);
  --color-accent-2:       #bef264;
  --color-accent-gradient: linear-gradient(135deg, #22c55e 0%, #bef264 100%);
  --color-nav-bg:         rgba(13, 21, 17, 0.86);
  --color-nav-mobile-bg:  rgba(13, 21, 17, 0.96);
  --color-panel-bg:       rgba(20, 32, 25, 0.98);
  --color-soft-fill:      rgba(255, 255, 255, 0.06);
  --color-soft-fill-2:    rgba(255, 255, 255, 0.12);
  --color-focus-ring:     rgba(34, 197, 94, 0.24);
  --color-hero-badge-bg:  rgba(255, 255, 255, 0.08);
  --color-bg-orb-1:       rgba(34, 197, 94, 0.13);
  --color-bg-orb-2:       rgba(190, 242, 100, 0.1);
  --color-bg-orb-3:       rgba(34, 197, 94, 0.07);
}

:root[data-theme="sunset"] {
  --color-bg-primary:     #1a1010;
  --color-bg-secondary:   #271618;
  --color-bg-elevated:    #321d21;
  --color-bg-glass:       rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.11);
  --color-surface:        #3f252a;
  --color-border:         rgba(251, 146, 60, 0.25);
  --color-border-hover:   rgba(251, 146, 60, 0.45);
  --color-text-primary:   #fff7ed;
  --color-text-secondary: #fed7aa;
  --color-text-muted:     #fdba74;
  --color-accent:         #fb923c;
  --color-accent-hover:   #f97316;
  --color-accent-glow:    rgba(251, 146, 60, 0.3);
  --color-accent-2:       #facc15;
  --color-accent-gradient: linear-gradient(135deg, #fb923c 0%, #facc15 100%);
  --color-nav-bg:         rgba(26, 16, 16, 0.86);
  --color-nav-mobile-bg:  rgba(26, 16, 16, 0.96);
  --color-panel-bg:       rgba(39, 22, 24, 0.98);
  --color-soft-fill:      rgba(255, 255, 255, 0.06);
  --color-soft-fill-2:    rgba(255, 255, 255, 0.12);
  --color-focus-ring:     rgba(251, 146, 60, 0.24);
  --color-hero-badge-bg:  rgba(255, 255, 255, 0.08);
  --color-bg-orb-1:       rgba(251, 146, 60, 0.14);
  --color-bg-orb-2:       rgba(250, 204, 21, 0.1);
  --color-bg-orb-3:       rgba(251, 146, 60, 0.07);
}