/* ==========================================================================
   ICFESSK — Design Tokens
   ========================================================================== */
:root {
  /* Brand */
  --violet:       #6C2BFF;
  --violet-light: rgba(108, 43, 255, 0.1);
  --violet-dark:  #581BE5;
  --blue:         #1A32F4;
  --blue-light:   rgba(26, 50, 244, 0.1);
  --magenta:      #F028D8;
  --green:        #22C55E;
  --green-light:  #DCFCE7;
  --red:          #EF4444;
  --red-light:    #FEE2E2;

  /* Areas */
  --area-mat: #00E5FF;
  --area-lec: #FF9800;
  --area-nat: #00C853;
  --area-soc: #D32F2F;
  --area-eng: #6200EA;

  /* Neutrals */
  --bg-primary:   #F8F8F6;
  --bg-white:     #FFFFFF;
  --bg-secondary: #ECEAE7;
  --text-primary: #2B2B2B;
  --text-secondary: #8E8A86;
  --text-inverse: #FFFFFF;
  --border:       #F1F5F9;
  --border-focus: var(--violet);

  /* Typography */
  --font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   900;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* Radius */
  --r-sm:  0.5rem;   /* 8px */
  --r-md:  0.75rem;  /* 12px */
  --r-lg:  1rem;     /* 16px */
  --r-xl:  1.25rem;  /* 20px */
  --r-2xl: 1.5rem;   /* 24px */
  --r-full: 9999px;

  /* Shadows — Neutral */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Shadows — Tinted (for area cards + hover) */
  --shadow-violet-sm: 0 2px 8px rgba(108,43,255,0.10);
  --shadow-violet-md: 0 8px 24px rgba(108,43,255,0.14);
  --shadow-mat: 0 8px 24px rgba(0,229,255,0.18);
  --shadow-lec: 0 8px 24px rgba(255,152,0,0.18);
  --shadow-nat: 0 8px 24px rgba(0,200,83,0.18);
  --shadow-soc: 0 8px 24px rgba(211,47,47,0.18);
  --shadow-eng: 0 8px 24px rgba(98,0,234,0.18);

  /* Gamification */
  --streak-speed: 1.5s;
  --glow-intensity: 8%;

  /* Extra Neutrals (shared) */
  --bg-hover:     #F8F9FC;
  --bg-elevated:  #FFFFFF;
  --border-subtle: #EDF0F5;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Purple-Navy Palette
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Neutrals */
  --bg-primary:    #121218;
  --bg-white:      #1C1C26;
  --bg-secondary:  #252532;
  --bg-hover:      #2A2A3A;
  --bg-elevated:   #22222E;
  --text-primary:  #E8E6F0;
  --text-secondary:#8B8A99;
  --text-inverse:  #121218;
  --border:        #2E2E3E;
  --border-subtle: #2A2A38;

  /* Brand adjustments for dark */
  --violet-light:  rgba(108, 43, 255, 0.18);
  --green-light:   rgba(34, 197, 94, 0.15);
  --red-light:     rgba(239, 68, 68, 0.15);
  --blue-light:    rgba(26, 50, 244, 0.15);

  /* Shadows — deeper in dark */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 20px -3px rgba(0,0,0,0.5), 0 4px 8px -4px rgba(0,0,0,0.4);

  /* Tinted shadows */
  --shadow-violet-sm: 0 2px 8px rgba(108,43,255,0.15);
  --shadow-violet-md: 0 8px 24px rgba(108,43,255,0.20);
  --shadow-mat: 0 8px 24px rgba(0,229,255,0.12);
  --shadow-lec: 0 8px 24px rgba(255,152,0,0.12);
  --shadow-nat: 0 8px 24px rgba(0,200,83,0.12);
  --shadow-soc: 0 8px 24px rgba(211,47,47,0.12);
  --shadow-eng: 0 8px 24px rgba(98,0,234,0.12);

  color-scheme: dark;
}