/* Techscholar design tokens, taken from the Figma file ("TS redesign").
   Font: Inter. Brand purple #3d358c, navy ink #1c2040, orange #f18820. Light theme as designed, plus a night mode. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --radius: 10px; --radius-lg: 10px; --radius-pill: 50px; --radius-sm: 6px;
  --tap: 44px;
  --dur: 160ms; --ease: cubic-bezier(.2, .8, .2, 1);

  /* Figma colours */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f3fb;
  --ink: #1c2040; --ink-2: #63636d; --ink-3: #667185;
  --border: rgba(113, 113, 122, .2); --border-input: #d0d5dd; --border-soft: rgba(113, 113, 122, .1);
  --brand: #3d358c; --brand-hover: #2f2970; --on-brand: #ffffff; --brand-text: #3d358c; --brand-soft: #d6d2ff;
  --accent: #f18820; --on-accent: #ffffff;
  --blue: #3f87fe; --pink: #fe28cf; --navy: #1c2040; --orange: #f18820; --green: #3db551;
  --tile-lavender: #d6d2ff; --tile-pink: #fbe6f7; --tile-peach: #ffdfbf; --tile-cyan: #dcf6fb;
  --success: #17724A; --success-bg: #E3F4EB; --warning: #7A4E00; --warning-bg: #FDF0D2;
  --danger: #B42318; --danger-bg: #FDE9E7; --info: #1F5FBF; --info-bg: #E6F0FD;
  --sidebar: #3d358c; --on-sidebar: #ffffff; --sidebar-active: #ffffff; --on-sidebar-active: #3d358c;
  --focus: #3f87fe;
  --shadow: 0 4px 50px rgba(221, 228, 234, .6);
  --press: 0;
  --xp: #FFD23F; --on-xp: #1c2040; --streak: #FF6B5B; --on-streak: #1c2040; --mint: #2FB989;
}

/* Extra neutrals the pages use for hairlines and bar tracks. */
:root { --line: #e3e5ee; --track: #eceef6; }

/* Night mode. "Auto" follows the device; the account menu can force Light or Dark (static/js/mode.js sets data-mode).
   Screen only, so a printed statement or report card is always the light version. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
  --bg: #12102b; --surface: #1c1a3d; --surface-2: #26234d;
  --ink: #f1effc; --ink-2: #b7b2d6; --ink-3: #9e99c4;
  --border: rgba(183, 178, 214, .22); --border-input: #6e6a9b; --border-soft: rgba(183, 178, 214, .14);
  --line: rgba(183, 178, 214, .2); --track: #2f2c5e;
  --brand: #5b50d6; --brand-hover: #6d63e3; --brand-text: #a9a2fb; --brand-soft: #2f2a6b;
  --sidebar: #231f5c; --on-sidebar-active: #231f5c; --focus: #8fb5ff;
  --success: #5fd39a; --success-bg: #173b2c; --warning: #f2c25b; --warning-bg: #3a2c0b; --danger: #ff8a80; --danger-bg: #4a1b17; --info: #8ab4ff; --info-bg: #16284a;
  --tile-lavender: #2f2a6b; --tile-pink: #4a2347; --tile-peach: #4a3320; --tile-cyan: #17383f;
  --shadow: 0 4px 50px rgba(0, 0, 0, .4); --navy: #38347a;
  }
}
@media screen {
  :root[data-mode="dark"] {
  --bg: #12102b; --surface: #1c1a3d; --surface-2: #26234d;
  --ink: #f1effc; --ink-2: #b7b2d6; --ink-3: #9e99c4;
  --border: rgba(183, 178, 214, .22); --border-input: #6e6a9b; --border-soft: rgba(183, 178, 214, .14);
  --line: rgba(183, 178, 214, .2); --track: #2f2c5e;
  --brand: #5b50d6; --brand-hover: #6d63e3; --brand-text: #a9a2fb; --brand-soft: #2f2a6b;
  --sidebar: #231f5c; --on-sidebar-active: #231f5c; --focus: #8fb5ff;
  --success: #5fd39a; --success-bg: #173b2c; --warning: #f2c25b; --warning-bg: #3a2c0b; --danger: #ff8a80; --danger-bg: #4a1b17; --info: #8ab4ff; --info-bg: #16284a;
  --tile-lavender: #2f2a6b; --tile-pink: #4a2347; --tile-peach: #4a3320; --tile-cyan: #17383f;
  --shadow: 0 4px 50px rgba(0, 0, 0, .4); --navy: #38347a;
  }
}

/* Students keep a friendlier touch inside the same look: slightly bigger corners and reward colours. */
[data-theme="student"] { --radius: 14px; }

@media (prefers-reduced-motion: reduce) { :root { --dur: 0.01ms; } }