/* Design tokens
   Single source for color, radius, spacing, and grade-band scale.
   Flat palette: blue primary, purple accent, one cool-biased neutral ramp.
   No gradients, no colored glow. Grade bands vary scale/radius/density only. */

:root {
  /* palette-primary (blue) */
  --blue-700: #0670b8;
  --blue-600: #0880d6;
  --blue-500: #0e98fb;
  --blue-400: #3fabfd;
  --blue-200: #93c5fd;
  --blue-100: #cfe8fd;
  --blue-50:  #eaf5fe;

  /* palette-accent (purple) */
  --purple-700: #6d3fe0;
  --purple-500: #8b5cf6;
  --purple-200: #e3d8fb;
  --purple-100: #f1ebfe;

  /* palette-neutral (cool-biased; one ramp folds gray + slate) */
  --n-900: #101725;
  --n-800: #1f2735;
  --n-700: #333d4d;
  --n-600: #4a5568;
  --n-500: #6b7688;
  --n-400: #9aa4b4;
  --n-300: #cdd5e0;
  --n-200: #e2e7ef;
  --n-100: #eef1f6;
  --n-50:  #f6f8fb;
  --white: #ffffff;
  --ground: #fcfdff;

  /* palette-semantic (kept apart from accent) */
  --ok-600: #16a34a;
  --ok-500: #22c55e;
  --ok-100: #d1fae5;
  --warn-600: #c2740a;
  --warn-500: #f59e0b;
  --warn-100: #fef3c7;
  --crit-600: #dc2626;
  --crit-500: #ef4444;
  --crit-100: #fef2f2;

  /* role-surfaces */
  --bg:        var(--ground);
  --surface:   var(--white);
  --surface-2: var(--n-50);
  --border:    var(--n-200);
  --border-2:  var(--n-300);

  /* role-text */
  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-400);
  --on-accent: var(--white);

  /* role-brand */
  --primary:       var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-line:  var(--blue-100);
  --accent:        var(--purple-500);
  --accent-hover:  var(--purple-700);
  --accent-line:   var(--purple-200);

  /* elevation (neutral only, no colored glow) */
  --sh-1: 0 1px 2px rgba(16,23,37,.06);
  --sh-2: 0 1px 2px rgba(16,23,37,.05), 0 10px 26px -14px rgba(16,23,37,.28);

  /* scale + shape (grade-band overrides these) */
  --band-scale: 1;
  --radius: 14px;
  --radius-sm: 10px;
  --pad-card: 18px;
  --gap: 14px;

  /* space ramp */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
}

/* grade-band skins — same palette, different scale/shape/density. Unset by default. */
[data-grade-band="k-2"] {
  --band-scale: 1.14;
  --radius: 22px;
  --radius-sm: 15px;
  --pad-card: 22px;
  --gap: 18px;
}

[data-grade-band="3-5"] {
  --band-scale: 1.06;
  --radius: 17px;
  --radius-sm: 12px;
  --pad-card: 19px;
  --gap: 14px;
}

[data-grade-band="6-8"] {
  --band-scale: 1;
  --radius: 14px;
  --radius-sm: 10px;
  --pad-card: 18px;
  --gap: 14px;
}

[data-grade-band="9-12"] {
  --band-scale: 0.95;
  --radius: 10px;
  --radius-sm: 8px;
  --pad-card: 16px;
  --gap: 12px;
}

/* dark ground — role tokens flip; palette hues hold */
body.dark-mode {
  --bg:        #0d1119;
  --surface:   #161c26;
  --surface-2: #1e2634;
  --border:    #2a3342;
  --border-2:  #384253;
  --text:      #e9edf3;
  --text-2:    #b7c2d0;
  --text-3:    #8494a6;
  --primary-line: #123049;
  --accent-line:  #2a2140;
}

/* Typography
   The font stack and type scale live here, not in style.css — the standalone
   pages (goals, profile, teacher) load tokens.css + student-ui.css only, and
   without these they fall back to the browser serif default.
   Values match style.css's :root so the chat and the pages render identically. */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-2xs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.6rem;
  --font-size-3xl: 2rem;
}