/* ==========================================================================
   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 — base (canonical from Skill Tree de Learn, learn.js AREA_SLUGS) */
  --area-mat: #38BDF8;   /* sky-400  · Matemáticas */
  --area-lec: #10B981;   /* emerald-500 · Lectura Crítica */
  --area-nat: #06B6D4;   /* cyan-500 · Ciencias Naturales */
  --area-soc: #34D399;   /* emerald-400 · Sociales */
  --area-eng: #FF6B6B;   /* coral-red · Inglés */

  /* Areas — dark (~30% darker, for 3D shadow stops) */
  --area-mat-dark: #0284C7;
  --area-lec-dark: #047857;
  --area-nat-dark: #0E7490;
  --area-soc-dark: #059669;
  --area-eng-dark: #DC2626;

  /* Areas — light (gradient top stop / soft bg) */
  --area-mat-light: #7DD3FC;
  --area-lec-light: #6EE7B7;
  --area-nat-light: #67E8F9;
  --area-soc-light: #A7F3D0;
  --area-eng-light: #FCA5A5;

  /* 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(56,189,248,0.20);
  --shadow-lec: 0 8px 24px rgba(16,185,129,0.20);
  --shadow-nat: 0 8px 24px rgba(6,182,212,0.20);
  --shadow-soc: 0 8px 24px rgba(52,211,153,0.20);
  --shadow-eng: 0 8px 24px rgba(255,107,107,0.20);

  /* Gamification */
  --streak-speed: 1.5s;
  --glow-intensity: 8%;
  --achievement-gold: #ffc800;

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

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

  /* Simulacros page tokens */
  --sim-hero-bg: #0D0D1A;
  --sim-stat-gold: #F59E0B;
  --sim-stat-gold-bg: rgba(245, 158, 11, 0.10);
  --sim-pass-green: #16A34A;
  --sim-pass-green-bg: rgba(34, 197, 94, 0.10);
  --sim-warn-amber: #D97706;
  --sim-warn-amber-bg: rgba(217, 119, 6, 0.10);
  --sim-recommend-bg: linear-gradient(135deg, rgba(108,43,255,0.06) 0%, rgba(0,180,216,0.06) 100%);
  --sim-recommend-border: rgba(108,43,255,0.18);
}

/* ══════════════════════════════════════════════════════════════
   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(56,189,248,0.14);
  --shadow-lec: 0 8px 24px rgba(16,185,129,0.14);
  --shadow-nat: 0 8px 24px rgba(6,182,212,0.14);
  --shadow-soc: 0 8px 24px rgba(52,211,153,0.14);
  --shadow-eng: 0 8px 24px rgba(255,107,107,0.14);

  color-scheme: dark;
}


/* ══════════════════════════════════════════════════════════════════════
   Mobile Design Tokens (extracted from responsive.css in Round 12)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --m-pad: 16px;
  --m-gap-sm: 8px;
  --m-gap-md: 12px;
  --m-gap-lg: 16px;
  --m-gap-xl: 24px;
  --m-card-r: 16px;
  --m-card-pad: 16px;
  --m-touch-min: 48px;
  --m-bottomnav-h: 64px;
}


/* Global easing tokens (from pages.css residual) */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}