/*
 * Neuro Academy — Design Tokens (CSS Custom Properties)
 * Compiled from Session 2 Design_Token_Artifact.
 * Default mode: dark. Light mode via [data-theme="light"].
 * Naming convention: --na-<category>-<name>
 */

:root {
  /* ============================================================
     COLOR — DARK (default)
     ============================================================ */
  /* Primary (blue-violet) */
  --na-color-primary-50:  #EAF0FF;
  --na-color-primary-100: #C9D5FF;
  --na-color-primary-300: #8FA8FF;
  --na-color-primary-500: #6E8BFF;
  --na-color-primary-700: #3D5BD9;
  --na-color-primary-900: #1A2B7A;

  /* Secondary (cyan-aqua) */
  --na-color-secondary-50:  #E6FBFF;
  --na-color-secondary-100: #BAF1FA;
  --na-color-secondary-300: #6FDDF0;
  --na-color-secondary-500: #34C2DD;
  --na-color-secondary-700: #1A8BA3;
  --na-color-secondary-900: #0B4654;

  /* Accent (magenta-violet) */
  --na-color-accent-50:  #F5EBFF;
  --na-color-accent-100: #DBC4FF;
  --na-color-accent-300: #B68BFF;
  --na-color-accent-500: #9A5BFF;
  --na-color-accent-700: #6C32CC;
  --na-color-accent-900: #341466;

  /* Neutral (10 stops) */
  --na-color-neutral-0:    #FFFFFF;
  --na-color-neutral-50:   #F2F4F8;
  --na-color-neutral-100:  #E1E5EE;
  --na-color-neutral-200:  #C5CCD9;
  --na-color-neutral-300:  #99A3B5;
  --na-color-neutral-400:  #6B7488;
  --na-color-neutral-500:  #4B5266;
  --na-color-neutral-600:  #343A4D;
  --na-color-neutral-700:  #1F2436;
  --na-color-neutral-800:  #131726;
  --na-color-neutral-900:  #0B0F1A;
  --na-color-neutral-1000: #04060D;

  /* Semantic */
  --na-color-success-500: #2EC27E;
  --na-color-warning-500: #F0B73A;
  --na-color-danger-500:  #F25E62;
  --na-color-info-500:    #4FA8FF;

  /* Surface & content */
  --na-color-surface:        #0B0F1A;
  --na-color-surface-raised: #131726;
  --na-color-surface-deep:   #04060D;
  --na-color-on-surface:     #F2F4F8;
  --na-color-on-surface-muted: #99A3B5;
  --na-color-on-surface-dim: #6B7488;

  /* Glass */
  --na-color-glass-tint:   rgba(255, 255, 255, 0.04);
  --na-color-glass-border: rgba(255, 255, 255, 0.12);
  --na-color-glass-highlight: rgba(255, 255, 255, 0.10);
  --na-color-shadow:       rgba(0, 0, 0, 0.55);
  --na-color-scrim:        rgba(4, 6, 13, 0.72);

  /* Focus */
  --na-color-focus: #8FA8FF;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --na-font-sans: "Inter", "Inter Variable", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --na-font-mono: "JetBrains Mono", "Fira Code", "Menlo", "Consolas", monospace;

  /* Modular scale — ratio 1.250 (Major Third) */
  --na-text-caption:    0.75rem;   /* 12 */
  --na-text-body-sm:    0.875rem;  /* 14 */
  --na-text-body-md:    1rem;      /* 16 */
  --na-text-body-lg:    1.25rem;   /* 20 */
  --na-text-heading-sm: 1.5rem;    /* 24 */
  --na-text-heading-md: 2rem;      /* 32 */
  --na-text-heading-lg: 2.5rem;    /* 40 */
  --na-text-display:    3.5rem;    /* 56 */

  --na-leading-tight:   1.15;
  --na-leading-snug:    1.3;
  --na-leading-normal:  1.5;
  --na-leading-relaxed: 1.6;

  --na-tracking-tight: -0.02em;
  --na-tracking-snug:  -0.01em;
  --na-tracking-normal: 0em;
  --na-tracking-wide:  0.02em;

  --na-weight-regular:  400;
  --na-weight-medium:   500;
  --na-weight-semibold: 600;
  --na-weight-bold:     700;

  /* ============================================================
     SPACING — basis 4px, 10 tiers
     ============================================================ */
  --na-space-2xs: 2px;
  --na-space-xs:  4px;
  --na-space-sm:  8px;
  --na-space-md:  12px;
  --na-space-lg:  16px;
  --na-space-xl:  24px;
  --na-space-2xl: 32px;
  --na-space-3xl: 48px;
  --na-space-4xl: 64px;
  --na-space-5xl: 96px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --na-radius-xs:   4px;
  --na-radius-sm:   8px;
  --na-radius-md:   12px;
  --na-radius-lg:   16px;
  --na-radius-xl:   24px;
  --na-radius-pill: 999px;

  /* ============================================================
     ELEVATION — 5 levels
     ============================================================ */
  --na-elev-0: none;
  --na-elev-1: 0 1px 2px 0 rgba(0, 0, 0, 0.20);
  --na-elev-2: 0 2px 6px 0 rgba(0, 0, 0, 0.28);
  --na-elev-3: 0 4px 12px 0 rgba(0, 0, 0, 0.36);
  --na-elev-4: 0 8px 24px 0 rgba(0, 0, 0, 0.42);
  --na-elev-5: 0 16px 40px 0 rgba(0, 0, 0, 0.50);

  /* ============================================================
     BLUR
     ============================================================ */
  --na-blur-sm: 8px;
  --na-blur-md: 16px;
  --na-blur-lg: 24px;
  --na-blur-xl: 32px;

  /* ============================================================
     MOTION
     ============================================================ */
  --na-motion-instant: 0ms;
  --na-motion-fast:    120ms;
  --na-motion-medium:  240ms;
  --na-motion-slow:    360ms;

  --na-ease-linear:   linear;
  --na-ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
  --na-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --na-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --na-bp-mobile:  0;
  --na-bp-tablet:  768px;
  --na-bp-desktop: 1024px;
  --na-bp-wide:    1440px;

  --na-container-tablet:  960px;
  --na-container-desktop: 1280px;
  --na-container-wide:    1440px;
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --na-color-surface:        #F7F8FB;
  --na-color-surface-raised: #FFFFFF;
  --na-color-surface-deep:   #E1E5EE;
  --na-color-on-surface:     #0B0F1A;
  --na-color-on-surface-muted: #4B5266;
  --na-color-on-surface-dim: #6B7488;

  --na-color-primary-500: #3D5BD9;
  --na-color-primary-300: #6E8BFF;
  --na-color-secondary-500: #1A8BA3;
  --na-color-accent-500: #6C32CC;

  --na-color-glass-tint:   rgba(255, 255, 255, 0.55);
  --na-color-glass-border: rgba(15, 23, 42, 0.08);
  --na-color-glass-highlight: rgba(255, 255, 255, 0.85);
  --na-color-shadow:       rgba(15, 23, 42, 0.18);
  --na-color-scrim:        rgba(247, 248, 251, 0.72);
  --na-color-focus: #3D5BD9;

  --na-elev-1: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --na-elev-2: 0 2px 6px 0 rgba(15, 23, 42, 0.08);
  --na-elev-3: 0 4px 12px 0 rgba(15, 23, 42, 0.10);
  --na-elev-4: 0 8px 24px 0 rgba(15, 23, 42, 0.12);
  --na-elev-5: 0 16px 40px 0 rgba(15, 23, 42, 0.16);
}

/* ============================================================
   HIGH-CONTRAST OVERRIDES
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --na-color-on-surface: #FFFFFF;
    --na-color-on-surface-muted: #E1E5EE;
    --na-color-glass-tint: rgba(255, 255, 255, 0.18);
    --na-color-glass-border: rgba(255, 255, 255, 0.45);
  }
  [data-theme="light"] {
    --na-color-on-surface: #000000;
    --na-color-on-surface-muted: #1F2436;
  }
}