/* Pencilwick design tokens — the single source of truth for colour, type, space, radius and motion.
   Every other stylesheet uses these variables; never hard-code colours elsewhere. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage.woff") format("woff");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson.woff") format("woff");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-italic.woff") format("woff");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff") format("woff");
  font-weight: 100 800; font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Palette: exercise book + Australian bush ---- */
  --ink: #10261f;          /* eucalyptus ink: body text */
  --ink-2: #3a5148;        /* secondary text */
  --ink-3: #5f726a;        /* muted text, placeholders (AA on paper) */
  --paper: #f5f8f3;        /* app background: cool page white */
  --sheet: #ffffff;        /* surfaces that sit on the paper */
  --sheet-2: #eef3ee;      /* sunken / alternate rows */
  --line: #dbe4dc;         /* hairlines between UI regions */

  --gum: #1e5b49;          /* primary action: gum-leaf green */
  --gum-hover: #17483a;
  --gum-2: #2f7a63;
  --gum-wash: #e1eee7;
  --on-gum: #ffffff;

  --wattle: #f2b233;       /* signature gold: progress, mastery, XP, highlights — never for errors */
  --wattle-deep: #b07a06;  /* gold text on light backgrounds (AA) */
  --wattle-wash: #fdf0cf;

  --rule: #d3e2ec;         /* exercise-book ruled lines */
  --rule-strong: #a7c3d6;
  --margin: #de5148;       /* exercise-book margin line; errors and "try again" only */
  --margin-wash: #fbe6e3;

  --ocean: #2a67a8;        /* information, links inside long text, teacher accent */
  --ocean-wash: #e3eef9;
  --success: #25803f;   /* 4.9:1 on white, so it works as small text too */
  --success-wash: #e2f3e8;

  /* role accents (used sparingly for the role switcher and section tints) */
  --role-student: var(--gum);
  --role-parent: #7a4fb3;
  --role-teacher: var(--ocean);

  /* mastery scale: not started → familiar → proficient → mastered */
  --m0: #e4e9e5;
  --m1: #f7dc9c;
  --m2: #f2b233;
  --m3: #1e5b49;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 body */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5625rem;   /* 25 */
  --fs-2xl: 1.9375rem;  /* 31 */
  --fs-3xl: 2.4375rem;  /* 39 */
  --fs-4xl: 3.0625rem;  /* 49 */
  --fs-hero: clamp(2.6rem, 1.6rem + 4.2vw, 4.75rem);

  --lh-body: 1.6;
  --lh-tight: 1.12;
  --measure: 68ch;

  /* ---- Space (4px base) ---- */
  --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-20: 80px; --s-24: 96px;

  /* ---- Exercise-book geometry ---- */
  --ruled: 32px;           /* line spacing of ruled pages = body line-height on pages */
  --margin-x: 64px;        /* distance of the red margin line from the page edge */

  /* ---- Radius: hierarchy, not one radius for everything ---- */
  --r-xs: 4px;    /* chips, tags, keycaps */
  --r-sm: 8px;    /* inputs, buttons */
  --r-md: 14px;   /* cards */
  --r-lg: 22px;   /* sheets, dialogs, the exercise-book page */
  --r-pill: 999px;

  /* ---- Elevation: paper, not glow ---- */
  --edge: 0 0 0 1px var(--line);
  --stack: 0 1px 0 var(--line), 3px 4px 0 -1px var(--sheet), 3px 4px 0 0 var(--rule-strong); /* a sheet resting on another sheet */
  --lift: 0 10px 30px -12px rgb(16 38 31 / 0.28), 0 2px 6px -2px rgb(16 38 31 / 0.12);   /* dialogs, menus only */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms;

  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--wattle-deep);
}

/* ---- Dark: the blackboard ---- */
/* `[data-theme="dark"]` also works on any element (e.g. a dark panel in the style guide);
   tokens that are built from other tokens are re-declared so they resolve in that scope. */
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3ef;          /* chalk */
  --ink-2: #bfd0c7;
  --ink-3: #8fa69b;
  --paper: #13221e;        /* blackboard green-black */
  --sheet: #1a2d27;
  --sheet-2: #20362f;
  --line: #2b443b;
  --gum: #5fbf98;
  --gum-hover: #79d1ad;
  --gum-2: #4aa985;
  --gum-wash: #1f3d33;
  --on-gum: #0d1f19;
  --wattle: #f5c04f;
  --wattle-deep: #f5c04f;
  --wattle-wash: #3a3220;
  --rule: #26403a;
  --rule-strong: #35564c;
  --margin: #f07a70;
  --margin-wash: #3d2522;
  --ocean: #7fb2ea;
  --ocean-wash: #1d3346;
  --success: #6fd197;
  --success-wash: #1d3a2a;
  --role-parent: #b997e6;
  --m0: #2a3f38;
  --m1: #6e5a2a;
  --m2: #c9932a;
  --m3: #5fbf98;
  --lift: 0 12px 34px -10px rgb(0 0 0 / 0.6);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--wattle);
  --edge: 0 0 0 1px var(--line);
  --stack: 0 1px 0 var(--line), 3px 4px 0 -1px var(--sheet), 3px 4px 0 0 var(--rule-strong);
  --role-student: var(--gum);
  --role-teacher: var(--ocean);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --ink: #edf3ef; --ink-2: #bfd0c7; --ink-3: #8fa69b;
    --paper: #13221e; --sheet: #1a2d27; --sheet-2: #20362f; --line: #2b443b;
    --gum: #5fbf98; --gum-hover: #79d1ad; --gum-2: #4aa985; --gum-wash: #1f3d33; --on-gum: #0d1f19;
    --wattle: #f5c04f; --wattle-deep: #f5c04f; --wattle-wash: #3a3220;
    --rule: #26403a; --rule-strong: #35564c; --margin: #f07a70; --margin-wash: #3d2522;
    --ocean: #7fb2ea; --ocean-wash: #1d3346; --success: #6fd197; --success-wash: #1d3a2a;
    --role-parent: #b997e6;
    --m0: #2a3f38; --m1: #6e5a2a; --m2: #c9932a; --m3: #5fbf98;
    --lift: 0 12px 34px -10px rgb(0 0 0 / 0.6);
    --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--wattle);
    --edge: 0 0 0 1px var(--line);
    --stack: 0 1px 0 var(--line), 3px 4px 0 -1px var(--sheet), 3px 4px 0 0 var(--rule-strong);
    --role-student: var(--gum); --role-teacher: var(--ocean);
  }
}

/* Young learners (F–2): bigger type, roomier targets. Applied via <html data-band="early">. */
:root[data-band="early"] {
  --fs-md: 1.25rem;
  --fs-lg: 1.4375rem;
  --ruled: 40px;
}

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