:root {
  /* ---------- Brand ---------- */
  --na-brand: #3B2F80;               /* logo indigo */
  --na-brand-hover: #2E2470;
  --na-brand-light: rgba(59, 47, 128, 0.08);
  --na-brand-glow: rgba(59, 47, 128, 0.28);

  --na-accent: #A3121E;              /* logo deep red */
  --na-accent-hover: #86101A;
  --na-accent-light: rgba(163, 18, 30, 0.08);

  --na-sun: #FFD23F;                 /* hero yellow */
  --na-sun-deep: #F5B700;
  --na-sun-light: rgba(255, 210, 63, 0.18);

  --na-sky: #1E88E5;                 /* links, highlights */
  --na-sky-light: rgba(30, 136, 229, 0.10);

  /* Category tiles */
  --na-tile-teal: #1BB394;
  --na-tile-crimson: #C0002B;
  --na-tile-orange: #FF7A00;
  --na-tile-lime: #F2FF00;

  /* ---------- Neutrals ---------- */
  --na-bg: #F7F8FC;                  /* page background */
  --na-bg-alt: #FFFFFF;              /* alternate section */
  --na-bg-tint: #EEF2FA;             /* soft section tint */
  --na-surface: #FFFFFF;
  --na-border: #E3E8F2;
  --na-border-strong: #CBD5E1;

  /* ---------- Text (8 semantic tokens) ---------- */
  --na-text-main: #1F2A6B;           /* headings */
  --na-text-body: #334155;
  --na-text-muted: #64748B;
  --na-text-dim: #94A3B8;
  --na-text-inverse: #FFFFFF;
  --na-text-inverse-muted: #E2E8F0;
  --na-text-brand: #3B2F80;
  --na-text-accent: #A3121E;

  /* ---------- Status ---------- */
  --na-success: #059669;
  --na-success-bg: #ECFDF5;
  --na-success-border: #A7F3D0;
  --na-danger: #B91C1C;
  --na-danger-bg: #FEF2F2;
  --na-danger-border: #FECACA;

  /* ---------- Typography ---------- */
  --na-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --na-font-display: 'Plus Jakarta Sans', var(--na-font);
  --na-text-xs: 0.75rem;     /* 12 */
  --na-text-sm: 0.875rem;    /* 14 */
  --na-text-base: 1rem;      /* 16 */
  --na-text-lg: 1.125rem;    /* 18 */
  --na-text-xl: 1.25rem;     /* 20 */
  --na-text-2xl: 1.5rem;     /* 24 */
  --na-text-3xl: 1.875rem;   /* 30 */
  --na-text-4xl: 2.25rem;    /* 36 */
  --na-text-hero: clamp(1.75rem, 3.2vw, 2.35rem);
  --na-lh-tight: 1.2;
  --na-lh-body: 1.6;
  --na-tracking-tight: -0.025em;

  /* ---------- Layout ---------- */
  --na-container: 1200px;
  --na-gutter: 32px;
  --na-section-y: 64px;
  --na-grid-gap: 24px;

  /* ---------- Radius ---------- */
  --na-radius-xs: 6px;
  --na-radius-sm: 8px;
  --na-radius-md: 12px;
  --na-radius-lg: 18px;
  --na-radius-xl: 24px;
  --na-radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --na-shadow-xs: 0 1px 2px rgba(31, 42, 107, 0.05);
  --na-shadow-sm: 0 1px 3px rgba(31, 42, 107, 0.06), 0 1px 2px rgba(31, 42, 107, 0.04);
  --na-shadow-card: 0 4px 16px -2px rgba(31, 42, 107, 0.07), 0 1px 3px rgba(31, 42, 107, 0.04);
  --na-shadow-hover: 0 18px 36px -8px rgba(31, 42, 107, 0.16), 0 0 0 1px rgba(59, 47, 128, 0.22);
  --na-shadow-float: 0 24px 48px -12px rgba(31, 42, 107, 0.25);
  --na-shadow-btn: 0 4px 14px rgba(59, 47, 128, 0.30);
  --na-shadow-btn-hover: 0 10px 24px rgba(59, 47, 128, 0.38);
  --na-shadow-sun: 0 10px 30px -6px rgba(255, 210, 63, 0.55);
  --na-shadow-inset: inset 0 1px 2px rgba(31, 42, 107, 0.08);

  /* ---------- Gradients ---------- */
  --na-grad-brand: linear-gradient(135deg, #3B2F80 0%, #5B4BC4 100%);
  --na-grad-text: linear-gradient(135deg, #3B2F80 0%, #1E88E5 100%);
  --na-grad-sun: linear-gradient(160deg, #FFE27A 0%, #FFD23F 45%, #F5B700 100%);
  --na-grad-spotlight: radial-gradient(900px 500px at 15% 0%, rgba(59,47,128,0.10), transparent 60%),
                       radial-gradient(700px 420px at 90% 100%, rgba(255,210,63,0.20), transparent 60%),
                       #F7F8FC;
  --na-grad-dots: radial-gradient(#CBD5E1 1.4px, transparent 1.4px);
  --na-grad-dots-size: 22px 22px;
  --na-grad-progress: linear-gradient(90deg, #3B2F80 0%, #1E88E5 50%, #FFD23F 100%);
  --na-grad-edge: linear-gradient(90deg, #3B2F80, #1E88E5);
  --na-grad-teal: linear-gradient(160deg, #1BB394 0%, #0E8F76 100%);
  --na-grad-crimson: linear-gradient(160deg, #C0002B 0%, #8E0020 100%);
  --na-grad-orange: linear-gradient(160deg, #FF7A00 0%, #D95F00 100%);
  --na-grad-lime: linear-gradient(160deg, #F2FF00 0%, #D4E600 100%);

  /* ---------- Motion ---------- */
  --na-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --na-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --na-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --na-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --na-dur-micro: 180ms;
  --na-dur-base: 280ms;
  --na-dur-reveal: 700ms;
  --na-dur-slow: 1200ms;
  --na-stagger: 80ms;

  /* ---------- Z-index ---------- */
  --na-z-header: 1000;
  --na-z-progress: 10001;
  --na-z-drawer: 9998;
  --na-z-modal: 9999;
  --na-z-toast: 10010;
}