/* Design tokens: the one source for colour, type, space, radius, shadow and motion.
   Components and pages use these variables only; a raw hex outside this file is a bug.
   Dark mode follows the device unless the student picks a theme (data-theme on <html>). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  /* Colour: light */
  --bg: #f5f6f3;            /* page ground */
  --surface: #ffffff;       /* cards, panels, inputs */
  --surface-2: #eef1ec;     /* one step down: segmented tracks, table heads, hover */
  --surface-3: #e4e8e2;     /* pressed, skeletons */
  --line: #e1e5de;          /* hairlines inside the app */
  --line-2: #cbd2c8;        /* control borders */
  --text: #141c18;          /* running text, headings */
  --muted: #4f5b55;         /* secondary text */
  --faint: #636e68;         /* captions, counts; still 4.5:1 on --bg */
  --accent: #0b6657;        /* primary action, focus, current item */
  --accent-hover: #08503f;
  --accent-weak: #ddefe9;   /* selected chip, current section */
  --accent-text: #08594c;   /* links and accent text on light grounds */
  --on-accent: #ffffff;
  --success: #1c7445;  --success-bg: #e4f3ea;
  --error: #b0202a;    --error-bg: #fbeaea;
  --warning: #835400;  --warning-bg: #fbf1dc;
  --info: #1f5f8b;     --info-bg: #e5f0f8;
  /* Notes callouts: high-yield, must memorize, mechanism, common confusion, integration, advanced */
  --co-hy: #a8222b;   --co-hy-bg: #fbeeee;
  --co-mem: #7a4d00;  --co-mem-bg: #fbf3e2;
  --co-mech: #1d5784; --co-mech-bg: #e9f1f8;
  --co-conf: #8a3b12; --co-conf-bg: #fcefe6;
  --co-int: #3b5a1e;  --co-int-bg: #eef4e6;
  --co-adv: #515c66;  --co-adv-bg: #eff1f3;
  --hl-bg: #fbecab;   /* the student's own highlights and search matches */
  --easy: var(--success);  --easy-bg: var(--success-bg);
  --medium: var(--warning); --medium-bg: var(--warning-bg);
  --hard: var(--error);    --hard-bg: var(--error-bg);
  /* Charts: activity heatmap, one hue light to dark (validated: monotone, 2:1 light end) */
  --heat-0: #eef1ec; --heat-1: #86bfb0; --heat-2: #55a090; --heat-3: #2c8372; --heat-4: #0b6657;
  --watermark: rgba(20, 28, 24, .055);
  --scrim: rgba(12, 16, 14, .45);
  color-scheme: light;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .8125rem;   /* 13px  captions, counts, legal */
  --fs-sm: .875rem;    /* 14px  dense UI, table cells */
  --fs-ui: 1rem;       /* 16px  default UI and question stems */
  --fs-read: 1.09375rem; /* 17.5px  notes reading size (student can change it) */
  --fs-lead: 1.25rem;  /* 20px  supporting lines */
  --fs-h3: 1.25rem;    /* 20px */
  --fs-h2: 1.625rem;   /* 26px */
  --fs-h1: 2rem;       /* 32px  app page titles */
  --fs-display: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem); /* 40–72px  landing hero only */
  --lh-tight: 1.15;
  --lh-ui: 1.5;
  --lh-read: 1.68;
  --track-display: -.03em;
  --track-head: -.015em;
  --measure: 70ch;

  /* Space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --gutter: clamp(16px, 4vw, 32px);
  --page: 1180px;     /* widest content */
  --page-app: 880px;  /* question bank and forms, as in the prototype */

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;

  /* Shadow: only things that float (menus, dialogs, toasts) and the main card */
  --shadow-card: 0 1px 2px rgba(20, 28, 24, .04), 0 6px 20px rgba(20, 28, 24, .05);
  --shadow-float: 0 4px 12px rgba(20, 28, 24, .08), 0 18px 48px rgba(20, 28, 24, .12);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* Layers */
  --z-bar: 20; --z-drawer: 40; --z-dialog: 60; --z-toast: 80;
}

/* Colour: dark. Written twice: once for "follow the device", once for the manual switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1211; --surface: #161b19; --surface-2: #1c2220; --surface-3: #252c29;
    --line: #262e2a; --line-2: #36403b;
    --text: #e6eae7; --muted: #a9b3ad; --faint: #8f9a94;
    --accent: #52bba8; --accent-hover: #6fcab9; --accent-weak: #133029; --accent-text: #86d6c6; --on-accent: #06201a;
    --success: #5fc68f; --success-bg: #13281c;
    --error: #f27f85;   --error-bg: #31191b;
    --warning: #e6b866; --warning-bg: #2c2517;
    --info: #7db7e0;    --info-bg: #14232f;
    --co-hy: #f2868b;   --co-hy-bg: #2f1a1c;
    --co-mem: #e6b866;  --co-mem-bg: #2c2517;
    --co-mech: #86b9e3; --co-mech-bg: #16222d;
    --co-conf: #eba070; --co-conf-bg: #2f2018;
    --co-int: #a9cd80;  --co-int-bg: #1c2716;
    --co-adv: #aab4be;  --co-adv-bg: #20262c;
    --hl-bg: #4a3f17;
    --heat-0: #1c2220; --heat-1: #25574c; --heat-2: #2f8070; --heat-3: #45a891; --heat-4: #86d6c6;
    --watermark: rgba(230, 234, 231, .045);
    --scrim: rgba(0, 0, 0, .6);
    --shadow-card: none;
    --shadow-float: 0 8px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1211; --surface: #161b19; --surface-2: #1c2220; --surface-3: #252c29;
  --line: #262e2a; --line-2: #36403b;
  --text: #e6eae7; --muted: #a9b3ad; --faint: #8f9a94;
  --accent: #52bba8; --accent-hover: #6fcab9; --accent-weak: #133029; --accent-text: #86d6c6; --on-accent: #06201a;
  --success: #5fc68f; --success-bg: #13281c;
  --error: #f27f85;   --error-bg: #31191b;
  --warning: #e6b866; --warning-bg: #2c2517;
  --info: #7db7e0;    --info-bg: #14232f;
  --co-hy: #f2868b;   --co-hy-bg: #2f1a1c;
  --co-mem: #e6b866;  --co-mem-bg: #2c2517;
  --co-mech: #86b9e3; --co-mech-bg: #16222d;
  --co-conf: #eba070; --co-conf-bg: #2f2018;
  --hl-bg: #4a3f17;
  --co-int: #a9cd80;  --co-int-bg: #1c2716;
  --co-adv: #aab4be;  --co-adv-bg: #20262c;
  --heat-0: #1c2220; --heat-1: #25574c; --heat-2: #2f8070; --heat-3: #45a891; --heat-4: #86d6c6;
  --watermark: rgba(230, 234, 231, .045);
  --scrim: rgba(0, 0, 0, .6);
  --shadow-card: none;
  --shadow-float: 0 8px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}