/* ============================================================
   Threat Forge — Design Tokens (CSS Custom Properties)
   ============================================================ */

:root {
  /* ── Primary Palette ─────────────────────────────────────── */
  --primary:            #00F0FF;
  --primary-rgb:        0, 240, 255;
  --primary-glow:       rgba(0, 240, 255, 0.15);
  --primary-glow-strong:rgba(0, 240, 255, 0.35);
  --primary-dark:       #00B8C4;

  --secondary:          #7B61FF;
  --secondary-rgb:      123, 97, 255;
  --secondary-glow:     rgba(123, 97, 255, 0.15);

  --accent:             #FF3D71;
  --accent-rgb:         255, 61, 113;
  --accent-glow:        rgba(255, 61, 113, 0.15);

  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-dark:            #0A0E1A;
  --bg-dark-rgb:        10, 14, 26;
  --bg-card:            #111827;
  --bg-card-rgb:        17, 24, 39;
  --bg-card-hover:      #1A2235;
  --bg-surface:         #0F1629;
  --bg-input:           #0D1224;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:       #F1F5F9;
  --text-secondary:     #94A3B8;
  --text-muted:         #64748B;
  --text-heading:       #FFFFFF;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:             rgba(255, 255, 255, 0.06);
  --border-light:       rgba(255, 255, 255, 0.10);
  --border-cyan:        rgba(0, 240, 255, 0.20);
  --border-focus:       rgba(0, 240, 255, 0.50);

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-hero:      linear-gradient(135deg, #0A0E1A 0%, #1A1040 50%, #0A0E1A 100%);
  --gradient-card:      linear-gradient(145deg, rgba(17, 24, 39, 0.90) 0%, rgba(10, 14, 26, 0.95) 100%);
  --gradient-cyan:      linear-gradient(135deg, #00F0FF 0%, #7B61FF 100%);
  --gradient-text:      linear-gradient(135deg, #00F0FF 0%, #7B61FF 50%, #FF3D71 100%);
  --gradient-cta:       linear-gradient(270deg, #0A0E1A, #1A1040, #0A0E1A, #1A1040);
  --gradient-mesh:      radial-gradient(ellipse at 20% 50%, rgba(123, 97, 255, 0.08) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 20%, rgba(0, 240, 255, 0.06) 0%, transparent 50%),
                        radial-gradient(ellipse at 60% 80%, rgba(255, 61, 113, 0.05) 0%, transparent 50%);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:          0 16px 64px rgba(0, 0, 0, 0.6);
  --shadow-glow-cyan:   0 0 20px rgba(0, 240, 255, 0.15), 0 0 60px rgba(0, 240, 255, 0.05);
  --shadow-glow-violet: 0 0 20px rgba(123, 97, 255, 0.15), 0 0 60px rgba(123, 97, 255, 0.05);

  /* ── Spacing Scale (8px base) ────────────────────────────── */
  --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.5rem;    /* 24px */
  --radius-full: 9999px;

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

  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2rem;        /* 32px */
  --text-4xl:  2.75rem;     /* 44px */
  --text-5xl:  3.5rem;      /* 56px */
  --text-6xl:  4rem;        /* 64px */

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.7;
  --leading-loose:  2;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  --transition-base:  all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:  all 0.15s ease;
  --transition-slow:  all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-color: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

  /* ── Z-Index Layers ──────────────────────────────────────── */
  --z-behind:     -1;
  --z-base:        0;
  --z-above:       1;
  --z-card:        10;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-navbar:      500;
  --z-overlay:     900;
  --z-modal:       1000;
  --z-tooltip:     1100;

  /* ── Container ───────────────────────────────────────────── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-pad:  var(--space-6);

  /* ── Misc ────────────────────────────────────────────────── */
  --glass-bg:       rgba(17, 24, 39, 0.60);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-blur:     20px;
}