/* ==========================================================================
   NepaEducation design tokens — shared by the public site (nepa.css) and the
   student panel (nepa-panel.css). Palette taken from logo.svg; see nepa.css
   header for rationale. Change colours HERE only.
   ========================================================================== */
:root {
  /* ---- Brand (HSL channels, use as hsl(var(--token))) ---- */
  --primary: 231 50% 41%;            /* #34449C — 8.4:1 on white */
  --primary-hover: 244 51% 25%;      /* #242062 */
  --primary-glow: 242 70% 84%;       /* light periwinkle — highlights on dark */
  --primary-soft: 232 55% 95%;       /* tinted backgrounds */
  --primary-foreground: 0 0% 100%;
  --periwinkle: 242 31% 54%;         /* #6664AD */

  --accent: 358 74% 48%;             /* #D32027 — 5.5:1 on white */
  --accent-hover: 358 71% 41%;       /* #B31F24 */
  --accent-bright: 358 80% 51%;      /* #E71E25 */
  --accent-soft: 358 85% 95%;
  --accent-strong: 358 71% 41%;      /* red text on light tints */
  --accent-foreground: 0 0% 100%;

  --success: 142 72% 29%;
  --success-soft: 141 79% 93%;
  --danger: 347 77% 40%;
  --danger-soft: 356 100% 95%;
  --violet: 263 70% 50%;
  --violet-soft: 251 91% 95%;
  --info: 200 98% 29%;
  --info-soft: 204 94% 94%;

  /* ---- Neutrals ---- */
  --foreground: 240 33% 22%;         /* deepened #333366 — headings, 12:1 on white */
  --text: 238 16% 30%;               /* body — 10:1 on white */
  --muted: 236 10% 42%;              /* secondary text — 6:1 on white */
  --background: 0 0% 100%;
  --surface: 235 40% 98%;            /* alternating sections */
  --border: 234 30% 91%;
  --input-border: 234 22% 84%;

  --navy: 244 51% 16%;               /* darker #242062 */
  --navy-2: 244 51% 25%;             /* #242062 */
  --on-dark: 240 100% 96%;           /* body text on navy — 14:1 */
  --on-dark-muted: 240 45% 85%;      /* 9:1 on navy */

  /* ---- Gradients ---- */
  --gradient-hero:
    radial-gradient(900px 500px at 85% -10%, hsl(var(--periwinkle) / .45), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, hsl(var(--accent) / .22), transparent 60%),
    linear-gradient(135deg, hsl(var(--navy)) 0%, hsl(var(--navy-2)) 55%, hsl(var(--primary)) 100%);
  --gradient-page:
    radial-gradient(600px 300px at 90% 0%, hsl(var(--periwinkle) / .45), transparent 60%),
    linear-gradient(135deg, hsl(var(--navy)) 0%, hsl(var(--navy-2)) 100%);
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary-hover)), hsl(var(--primary)));  /* text on both stops ≥ 8:1 */
  --gradient-brand-bar: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--periwinkle)) 50%, hsl(var(--accent)));

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / .06);
  --shadow-md: 0 10px 30px hsl(var(--foreground) / .07);
  --shadow-lg: 0 24px 60px hsl(var(--foreground) / .14);
  --shadow-glow: 0 8px 22px hsl(var(--primary) / .30);
  --focus-ring: 0 0 0 4px hsl(var(--primary) / .22);

  /* ---- Shape / spacing (8px scale) ---- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px;

  /* ---- Type ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2rem, 4.4vw, 3.25rem);
  --fs-h1: clamp(1.8rem, 4vw, 2.6rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.25rem);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --transition-smooth: all .3s var(--ease);
  --transition-fast: all .18s var(--ease);
}