/* =========================================================
   CYRTIX ACADEMY — BRAND TOKENS v4.1 (OPTIMIZED + FUTURE READY)
   MASTER TOKEN SOURCE FOR ALL DESIGN SYSTEMS
=========================================================== */

:root {

  /* ============================================
     FONT FAMILIES
  ============================================ */
  --cx-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-font-body:    "Inter",   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-font-mono:    "JetBrains Mono", ui-monospace, Menlo, Monaco, "Roboto Mono", monospace;

  /* ============================================
     FONT WEIGHTS
  ============================================ */
  --cx-weight-light:      300;
  --cx-weight-normal:     400;
  --cx-weight-medium:     500;
  --cx-weight-semibold:   600;
  --cx-weight-bold:       700;
  --cx-weight-extrabold:  800;
  --cx-weight-black:      900;

  /* ============================================
     TEXT SCALE
  ============================================ */
  --cx-text-xs:   0.75rem;
  --cx-text-sm:   0.875rem;
  --cx-text-base: 1rem;
  --cx-text-lg:   1.125rem;
  --cx-text-xl:   1.25rem;
  --cx-text-2xl:  1.5rem;
  --cx-text-3xl:  1.875rem;
  --cx-text-4xl:  2.25rem;
  --cx-text-5xl:  2.75rem;
  --cx-text-hero: clamp(2.5rem, 4vw, 4rem);

  /* ============================================
     LINE HEIGHT TOKENS
  ============================================ */
  --cx-leading-none:    1;
  --cx-leading-tight:   1.1;
  --cx-leading-normal:  1.5;
  --cx-leading-relaxed: 1.7;

  /* ============================================
     BRAND COLORS — CYRTIX CORE
  ============================================ */

  /* Cyber Blue */
  --cx-blue-50:  #E6EAF2;
  --cx-blue-100: #C7D3E4;
  --cx-blue-200: #A8BAD6;
  --cx-blue-300: #8AA2C8;
  --cx-blue-400: #6C8AB9;
  --cx-blue-500: #4D72AB;
  --cx-blue-600: #2F5A9D;
  --cx-blue-700: #194682;
  --cx-blue-800: #0F2D58;
  --cx-blue-900: #0A1A3F;
  --cx-blue-950: #050D20;

  /* Electric Cyan */
  --cx-cyan-50:  #E1FBFF;
  --cx-cyan-100: #B4F4FF;
  --cx-cyan-200: #89EEFF;
  --cx-cyan-300: #5CE8FF;
  --cx-cyan-400: #2FE2FF;
  --cx-cyan-500: #00E0FF;
  --cx-cyan-600: #00C9E5;
  --cx-cyan-700: #00A8BF;
  --cx-cyan-800: #007B8C;
  --cx-cyan-900: #004C55;
  --cx-cyan-950: #002328;

  /* Cyber Crimson */
  --cx-crimson-50:  #FDE6F1;
  --cx-crimson-100: #FACCE3;
  --cx-crimson-200: #F299C7;
  --cx-crimson-300: #EA66AA;
  --cx-crimson-400: #E2338E;
  --cx-crimson-500: #D20D6F;
  --cx-crimson-600: #A90B57;
  --cx-crimson-700: #820840;
  --cx-crimson-800: #5A062C;
  --cx-crimson-900: #330316;
  --cx-crimson-950: #19020B;

  /* Neutrals — Silver Slate */
  --cx-slate-50:  #F4F6F8;
  --cx-slate-100: #E9EDF1;
  --cx-slate-200: #D8DEE6;
  --cx-slate-300: #C7D3DF;
  --cx-slate-400: #B3C0CD;
  --cx-slate-500: #A8B3C1;
  --cx-slate-600: #8A95A2;
  --cx-slate-700: #6B7482;
  --cx-slate-800: #4D5662;
  --cx-slate-900: #2E333C;
  --cx-slate-950: #181B20;

  /* Cyber Steel */
  --cx-steel-50:  #E6E8ED;
  --cx-steel-100: #C2C7D5;
  --cx-steel-200: #9EA7BD;
  --cx-steel-300: #7A86A4;
  --cx-steel-400: #56668C;
  --cx-steel-500: #324673;
  --cx-steel-600: #1F2E4F;
  --cx-steel-700: #16203A;
  --cx-steel-800: #0F162C;
  --cx-steel-900: #0D1424;
  --cx-steel-950: #060A12;

  /* ============================================
     ALPHA COLOR SETS
  ============================================ */
  /* Cyan */
  --cx-cyan-a10: rgba(0,224,255,0.10);
  --cx-cyan-a20: rgba(0,224,255,0.20);
  --cx-cyan-a40: rgba(0,224,255,0.40);
  --cx-cyan-a60: rgba(0,224,255,0.60);
  --cx-cyan-a80: rgba(0,224,255,0.80);

  /* Crimson */
  --cx-crimson-a10: rgba(210,13,111,0.10);
  --cx-crimson-a20: rgba(210,13,111,0.20);
  --cx-crimson-a40: rgba(210,13,111,0.40);
  --cx-crimson-a60: rgba(210,13,111,0.60);
  --cx-crimson-a80: rgba(210,13,111,0.80);

  /* Whites for glass panels */
  --cx-white-a02: rgba(255,255,255,0.02);
  --cx-white-a03: rgba(255,255,255,0.03);
  --cx-white-a04: rgba(255,255,255,0.04);
  --cx-white-a06: rgba(255,255,255,0.06);
  --cx-white-a08: rgba(255,255,255,0.08);

  /* RGB helpers */
  --cx-crimson-500-rgb: 210, 13, 111;
  --cx-cyan-500-rgb:      0, 224, 255;

  /* ============================================
     SEMANTIC COLORS
  ============================================ */
  --cx-success: #10B981;
  --cx-warning: #F59E0B;
  --cx-danger:  #EF4444;
  --cx-info:    #3B82F6;

  --cx-success-bg: rgba(16,185,129,0.15);
  --cx-warning-bg: rgba(245,158,11,0.15);
  --cx-danger-bg:  rgba(239,68,68,0.15);
  --cx-info-bg:    rgba(59,130,246,0.15);

  --cx-focus-ring: 0 0 0 3px rgba(0,224,255,0.45);

  /* ============================================
     GRADIENTS
  ============================================ */
  --cx-grad-cyan:        linear-gradient(135deg, #00E0FF, #33F3FF);
  --cx-grad-crimson:     linear-gradient(135deg, #D20D6F, #A00A56);
  --cx-grad-cyberfusion: linear-gradient(135deg, #00E0FF, #D20D6F);
  --cx-grad-primary:     linear-gradient(135deg, #0A1A3F, #071127);

  --cx-grad-card-glow:   radial-gradient(circle at top, rgba(0,224,255,0.10), transparent);

  /* Hero */
  --cx-hero-gradient:
      linear-gradient(180deg, rgba(10,26,63,0.85), rgba(10,18,30,0.6)),
      var(--cx-grad-cyberfusion);

  --cx-hero-pattern-opacity: 0.28;

  /* ============================================
     SPACING SCALE
  ============================================ */
  --cx-space-1: 0.25rem;
  --cx-space-2: 0.5rem;
  --cx-space-3: 0.75rem;
  --cx-space-4: 1rem;
  --cx-space-6: 1.5rem;
  --cx-space-8: 2rem;
  --cx-space-12: 3rem;
  --cx-space-16: 4rem;
  --cx-space-20: 5rem;

  /* Useful aliases */
  --cx-gap-sm: var(--cx-space-4);
  --cx-gap-md: var(--cx-space-6);
  --cx-gap-lg: var(--cx-space-8);

  /* ============================================
     RADII
  ============================================ */
  --cx-radius-sm: 6px;
  --cx-radius-md: 10px;
  --cx-radius-lg: 14px;
  --cx-radius-xl: 22px;
  --cx-radius-xxl: 32px;
  --cx-radius-full: 9999px;

  --cx-radius-card: var(--cx-radius-lg);

  /* ============================================
     SHADOWS / GLOWS
  ============================================ */
  --cx-shadow-sm: 0 4px 12px rgba(0,0,0,0.25);
  --cx-shadow-md: 0 8px 26px rgba(0,0,0,0.32);
  --cx-shadow-lg: 0 16px 40px rgba(0,0,0,0.40);
  --cx-shadow-xl: 0 30px 80px rgba(0,0,0,0.50);
  --cx-shadow-2xl: 0 40px 120px rgba(0,0,0,0.55);

  --cx-glow-cyan-soft:   0 0 18px rgba(0,224,255,0.25);
  --cx-glow-cyan-strong: 0 0 32px rgba(0,224,255,0.55);

  --cx-glow-crimson-soft:   0 0 18px rgba(210,13,111,0.25);
  --cx-glow-crimson-strong: 0 0 32px rgba(210,13,111,0.55);

  /* ============================================
     COMPONENT TOKENS
  ============================================ */
  --cx-header-height: 4.6rem;
  --cx-header-bg: rgba(10,26,63,0.35);
  --cx-header-bg-scrolled: rgba(10,26,63,0.55);
  --cx-header-border: rgba(255,255,255,0.08);

  --cx-mega-radius: var(--cx-radius-lg);
  --cx-mega-shadow: var(--cx-shadow-lg);
  --cx-mega-width: 860px;
  --cx-mega-max-width: 90vw;

  --cx-btn-radius: var(--cx-radius-md);
  --cx-btn-primary-glow: var(--cx-glow-cyan-strong);
  --cx-btn-danger-glow: var(--cx-glow-crimson-strong);

  --cx-card-bg: rgba(255,255,255,0.05);
  --cx-card-border: rgba(255,255,255,0.12);
  --cx-card-glass: rgba(255,255,255,0.08);

  --cx-glass-dark:      rgba(14,18,26,0.96);
  --cx-glass-dark-soft: rgba(14,18,26,0.88);

  --cx-border-thin: 1px;
  --cx-border-thick: 2px;

  /* ============================================
     ANIMATION TOKENS
  ============================================ */
  --cx-duration-fast: 120ms;
  --cx-duration-base: 180ms;
  --cx-duration-slow: 260ms;

  --cx-ease-smooth: cubic-bezier(0.4, 0.1, 0.2, 1);
  --cx-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --cx-ease-spring: cubic-bezier(0.25, 1.5, 0.5, 1);

  --cx-easing-standard: var(--cx-ease-smooth);

/* ============================================
   SURFACE ALIASES (CRITICAL FOR COMPONENTS)
============================================ */


  --cx-surface-900: var(--cx-steel-900);
  --cx-surface-800: var(--cx-steel-800);
  --cx-surface-700: var(--cx-steel-700);

  --cx-surface-glass: var(--cx-glass-dark-soft);


}

/* =========================================================
   OPTIONAL — THEME HOOKS (future proof, not active yet)
=========================================================== */
/*
:root.light {
  /* semantic tokens override here if needed 
}

:root.dark {
  /* dark theme overrides (future support) 
}
*/