/* ============================================================
   ARGORIX ACADEMY — Design Tokens
   Premium dark cybersecurity training brand.
   Violet → Indigo → Electric Blue → Cyan on deep space.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand ---------- */
  --brand-void: #050409;
  --brand-space: #0A0913;
  --brand-panel: #16142A;
  --brand-panel-hi: #1F1C3A;
  --brand-violet: #7C3AED;
  --brand-indigo: #5B3DF5;
  --brand-electric: #2F6BFF;
  --brand-cyan: #2BC4F4;
  --brand-cyan-bright: #5CD6FF;
  --brand-white: #FFFFFF;
  --brand-ice: #EEF6FF;

  /* ---------- Neutrals ---------- */
  --neutral-950: #030712; --neutral-925: #050409; --neutral-900: #0A0913;
  --neutral-850: #101020; --neutral-800: #16142A; --neutral-750: #1B1831;
  --neutral-700: #1F1C3A; --neutral-650: #272342; --neutral-600: #34304F;
  --neutral-500: #6B6A8F; --neutral-400: #9B9CC4; --neutral-300: #C9CBEA;
  --neutral-200: #ECECFB; --neutral-100: #F7F8FF; --neutral-50: #FBFCFF;

  /* ---------- Semantic ---------- */
  --success: #2BD27A; --success-soft: rgba(43,210,122,0.14);
  --warning: #FFB547; --warning-soft: rgba(255,181,71,0.14);
  --danger: #E5484D;  --danger-soft: rgba(229,72,77,0.14);
  --info: #2F6BFF;    --info-soft: rgba(47,107,255,0.14);
  --premium: #A78BFA; --premium-soft: rgba(167,139,250,0.14);
  --pending: #FACC15; --pending-soft: rgba(250,204,21,0.14);

  /* ---------- Course category ---------- */
  --course-ai: #5CD6FF;
  --course-mcp: #7C3AED;
  --course-devsecops: #2F6BFF;
  --course-cloud: #38BDF8;
  --course-api: #A78BFA;
  --course-container: #22D3EE;
  --course-supply-chain: #F59E0B;
  --course-threat-modeling: #F472B6;
  --course-security-champion: #2BD27A;

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(135deg, #7C3AED 0%, #2F6BFF 52%, #2BC4F4 100%); /* @kind color */
  --grad-hero: radial-gradient(circle at 15% 8%, rgba(124,58,237,.35), transparent 30%), radial-gradient(circle at 85% 5%, rgba(43,196,244,.25), transparent 35%), linear-gradient(135deg, #050409 0%, #0A0913 50%, #081B30 100%); /* @kind color */
  --grad-card: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); /* @kind color */
  --grad-panel: linear-gradient(180deg, #1F1C3A 0%, #16142A 100%); /* @kind color */
  --grad-text: linear-gradient(90deg, #7C3AED 0%, #2F6BFF 45%, #5CD6FF 100%); /* @kind color */
  --grad-ai: linear-gradient(135deg, #2F6BFF 0%, #5CD6FF 100%); /* @kind color */
  --grad-mcp: linear-gradient(135deg, #7C3AED 0%, #5B3DF5 45%, #2BC4F4 100%); /* @kind color */
  --grad-success: linear-gradient(135deg, #2BD27A 0%, #5CD6FF 100%); /* @kind color */

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-accent: 'Orbitron', var(--font-display);

  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px;
  --text-5xl: 48px; --text-6xl: 60px; --text-7xl: 72px;

  --leading-tight: 0.95; --leading-display: 1.05; --leading-title: 1.12; --leading-body: 1.65;

  /* ---------- Radii ---------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.20);
  --shadow-md: 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.38);
  --shadow-xl: 0 34px 100px rgba(0,0,0,.48);
  --shadow-glow-blue: 0 0 34px rgba(47,107,255,.32);
  --shadow-glow-cyan: 0 0 34px rgba(43,196,244,.28);
  --shadow-glow-violet: 0 0 34px rgba(124,58,237,.30);

  /* ---------- Borders ---------- */
  --border: rgba(155,156,196,0.14);
  --border-hi: rgba(155,156,196,0.24);
  --border-glow: rgba(92,214,255,0.35);

  /* ---------- Layout ---------- */
  --maxw: 1240px;
  --nav-h: 68px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
}