/* Design tokens shared by the practice pages and by the panels the tutor page builds in script (the editor, the notes, the change request form).
   Nothing in those stylesheets or scripts holds a raw size or colour: they use these names, so changing the design means changing one line here
   (igcse/tests/layout-css.mjs fails if a raw pixel value or a colour appears outside this file).

   Type is a five-step scale in rem, so it follows the reader's own text-size setting, and each step is fluid between a phone and a desktop with clamp().
   Colours are defaults only (:where() gives them no weight): a page that sets its own palette keeps it, and dark mode follows the system. A page that has no dark
   palette of its own says so with data-theme="light" on <html>, so its names are not half dark. */
:root {
  /* spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 40px;
  /* touch targets */
  --tap: 44px; --tap-compact: 40px; --tap-key: 2rem; /* a key in the symbol keypad: eight to a row on a phone, so its width may be this much, its height is still a compact target */
  /* the page's side gutter: fluid between two steps of the spacing scale */
  --gutter: clamp(var(--space-3), 4vw, calc(var(--space-4) + var(--space-1)));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter-bottom: calc(var(--space-5) + var(--safe-bottom));
  /* widths */
  --column: 47.5rem; --tab-min: 9.5rem; --tab-max: 12.5rem; --embed-height: 29rem;
  /* the ring the pages draw around a selected tab (box-shadow); the tab row keeps this much room so it is not clipped */
  --focus-ring: 2px;
  /* type: five steps. xs = tags and captions, sm = labels and secondary text, md = body, answers and inputs (never under 16px, so phones do not zoom on
     focus), lg = the question, xl = a result or a heading */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9rem);
  --text-md: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  /* the names the layout already used */
  --text-small: var(--text-sm); --text-answer: var(--text-md); --text-input: var(--text-md); --text-prompt: var(--text-lg); --text-result: var(--text-xl);
  /* the one family every page uses (the type rule, igcse/lib/type-rules.js: a page names this, never a family of its own) */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight-answer: 500; --weight-strong: 650; --leading-answer: 1.35; --leading-body: 1.45; --leading-button: 1.25;
  /* controls */
  --mark-gap: calc(var(--space-2) + var(--space-1) / 2); /* between the small icons on a skill card (each drawn edge to edge in its box, so this is the visible gap) */
  --review-space: var(--space-3); /* the review panel: its padding, and the space between its rows, are this one value (a phone makes it smaller) */
  --radio-size: 18px; --tick-width: 20px; --icon-size: 20px; --icon-size-action: 1.4rem;
  --radius-control: 10px; --radius-panel: 12px; --radius-pill: 999px; --border-control: 1.5px;
  --hairline: 1px; --focus-glow: 3px;
  --pad-height: clamp(180px, 38vh, 360px); --pen-size: 2;
}
:where(:root) {
  --bg: #f5f7fa; --panel: #ffffff; --panel2: #eef2f7; --border: #d9e0e8;
  --text: #1b2733; --sub: #5d6b7c; --accent: #2b62c9; --accentText: #ffffff;
  --ok: #17703a; --okBg: rgba(38, 150, 88, 0.13);
  --bad: #a63a2b; --badBg: rgba(190, 70, 50, 0.12);
  --warn: #7a5200; --warnBg: rgba(150, 100, 0, 0.13);
  --focus: rgba(43, 98, 201, 0.35);
  --surface-drawing: #fbfcfe;      /* the paper a diagram is drawn on: light in both themes, because the drawings are */
  --shadow: rgba(0, 0, 0, 0.22);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --bg: #12171e; --panel: #1a222c; --panel2: #232d39; --border: #303c4a;
    --text: #e7edf4; --sub: #9aa8b8; --accent: #6b9bf0; --accentText: #0f1620;
    --ok: #6fd39a; --okBg: rgba(80, 200, 130, 0.16);
    --bad: #f09a8a; --badBg: rgba(240, 120, 100, 0.16);
    --warn: #e8c168; --warnBg: rgba(230, 180, 80, 0.16);
    --focus: rgba(107, 155, 240, 0.4);
    --shadow: rgba(0, 0, 0, 0.5);
  }
}
:where(:root[data-theme="light"]) { color-scheme: light; }