/* ============================================================
   Project Archon — CSS Variables (Design Tokens)
   Global custom properties used across all pages
   ============================================================ */

:root {
  /* ── Color Palette ───────────────────────────────────────── */
  --bg-primary:       #0B1220;
  --bg-secondary:     #0D1628;
  --card-bg:          #141C2F;
  --card-bg-hover:    #1A2540;
  --border-color:     rgba(255, 255, 255, 0.08);
  --border-glow:      rgba(0, 230, 118, 0.3);

  --primary:          #00E676;
  --primary-dark:     #00C853;
  --primary-light:    #69F0AE;
  --primary-glow:     rgba(0, 230, 118, 0.15);

  --secondary:        #2962FF;
  --secondary-dark:   #1A47CC;
  --secondary-light:  #5C8FFF;
  --secondary-glow:   rgba(41, 98, 255, 0.15);

  --danger:           #FF5252;
  --danger-dark:      #D32F2F;
  --danger-light:     #FF8A80;
  --danger-glow:      rgba(255, 82, 82, 0.15);

  --warning:          #FFB300;
  --warning-glow:     rgba(255, 179, 0, 0.15);

  --text-primary:     #FFFFFF;
  --text-secondary:   #AAB4C5;
  --text-muted:       #6B7A93;
  --text-inverse:     #0B1220;

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-primary:     linear-gradient(135deg, #00E676, #00C853);
  --grad-secondary:   linear-gradient(135deg, #2962FF, #1A47CC);
  --grad-hero:        linear-gradient(135deg, #0B1220 0%, #0D1628 40%, #111827 100%);
  --grad-card:        linear-gradient(135deg, rgba(20,28,47,0.9), rgba(13,22,40,0.95));
  --grad-glass:       linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  --grad-danger:      linear-gradient(135deg, #FF5252, #D32F2F);
  --grad-gold:        linear-gradient(135deg, #FFB300, #FF8F00);
  --grad-purple:      linear-gradient(135deg, #7C4DFF, #5B00D4);
  --grad-cyan:        linear-gradient(135deg, #00B0FF, #0081CB);
  --grad-border:      linear-gradient(135deg, rgba(0,230,118,0.5), rgba(41,98,255,0.5));

  /* ── Typography ──────────────────────────────────────────── */
  --font-primary:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */
  --text-6xl:         3.75rem;    /* 60px */
  --text-7xl:         4.5rem;     /* 72px */

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --lh-tight:         1.25;
  --lh-snug:          1.375;
  --lh-normal:        1.5;
  --lh-relaxed:       1.625;
  --lh-loose:         2;

  /* ── 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 */
  --space-32:         8rem;      /* 128px */

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:        0.375rem;  /*  6px */
  --radius-md:        0.5rem;    /*  8px */
  --radius-lg:        0.75rem;   /* 12px */
  --radius-xl:        1rem;      /* 16px */
  --radius-2xl:       1.25rem;   /* 20px */
  --radius-3xl:       1.5rem;    /* 24px */
  --radius-full:      9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:        0 10px 40px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-xl:        0 20px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-primary:   0 8px 30px rgba(0,230,118,0.25);
  --shadow-secondary: 0 8px 30px rgba(41,98,255,0.25);
  --shadow-danger:    0 8px 30px rgba(255,82,82,0.25);
  --shadow-card:      0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);

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

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-base:           0;
  --z-above:          10;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-pad:    clamp(1rem, 4vw, 2rem);
  --nav-height:       100px;
  --sidebar-width:    260px;
}

/* ── Light Theme Overrides ────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:       #F8FAFC;
  --bg-secondary:     #E2E8F0;
  --card-bg:          #FFFFFF;
  --card-bg-hover:    #F1F5F9;
  --border-color:     rgba(0, 0, 0, 0.08);
  --border-glow:      rgba(0, 230, 118, 0.2);

  --text-primary:     #0F172A;
  --text-secondary:   #334155;
  --text-muted:       #64748B;
  --text-inverse:     #FFFFFF;

  --grad-hero:        linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 40%, #CBD5E1 100%);
  --grad-card:        linear-gradient(135deg, rgba(255,255,255,1), rgba(248,250,252,1));
  --grad-glass:       linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));

  --shadow-sm:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:        0 10px 40px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-xl:        0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-card:      0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}