/*
 * Design tokens: the only file with raw values (colours, sizes, fonts).
 * Everything else uses these variables; tools/check-css.sh fails CI on a raw
 * colour, font size, spacing or radius anywhere else. The component reference
 * page (/admin/ui) shows every token and component in both themes.
 *
 * Cascade layers, lowest first. Later layers win regardless of selector
 * specificity, so a component never has to out-specify the base styles and a
 * page rule always refines a component.
 */
@layer reset, base, layout, components, pages, utilities;

/* ---------- Fonts (SIL OFL 1.1, built by tools/build-fonts.py) ---------- */
/* Variable faces: one file per style covers every weight the app uses.
 * `swap` shows the system fallback at once and the web font when loaded. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/figtree.woff2") format("woff2");
}
@font-face {
    font-family: "Figtree";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/figtree-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/static/fonts/literata.woff2") format("woff2");
}

/* ---------- Theme-independent tokens ---------- */
:root {
    /* Type: Figtree for text, UI and headings; Literata for the page title
     * (h1) and the brand. */
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head: "Literata", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* One text size on every screen (16px by default), in rem so the
     * browser's own text-size setting still counts; only the heading sizes
     * below follow the viewport. */
    --root-size: 1rem;

    /* Type scale, ratio about 1.2 around the 1rem body text. */
    --text-xs: 0.75rem;     /* nav captions, counters, table headers */
    --text-sm: 0.875rem;    /* labels, meta lines, dense cells */
    --text-base: 1rem;      /* body text */
    --text-lg: 1.2rem;      /* card headings, dialog titles */
    --text-xl: 1.44rem;     /* h2 */
    --text-2xl: 1.728rem;   /* h1 on phones */
    --text-3xl: 2.074rem;   /* h1 on wide screens */
    --text-display: 3.4rem; /* the countdown */
    --text-h1: clamp(var(--text-2xl), 1.5rem + 0.6vw, var(--text-3xl));
    --text-h2: clamp(var(--text-lg), 1.1rem + 0.5vw, var(--text-xl));

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.15;  /* headings */
    --leading-snug: 1.3;    /* tiles, dense lists */
    --leading-normal: 1.6;  /* body text */
    --leading-rich: 1.42;   /* stored rich text, as in the Quill editor */

    --tracking-tight: -0.015em;  /* headings */
    --tracking-caps: 0.05em;     /* uppercase labels */

    /* Spacing: one 4px-based scale for padding, margin and gap. */
    --space-0: 0.125rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;

    /* Lines. */
    --border-width: 1px;
    --border-thick: 3px;   /* accent edges, autosave bars */
    --focus-width: 2px;

    /* Corners. */
    --radius-sm: 0.375rem;  /* small controls, nav pills, tiles */
    --radius-md: 0.6rem;    /* controls, cards, dialogs */
    --radius-pill: 999px;   /* chips, badges */
    --radius-round: 50%;    /* avatars, dots */

    /* Controls: one height for inputs, selects and buttons in a row; at least
     * 44px under a coarse pointer (finger), 24px for small inline controls. */
    --control-text: var(--text-sm);
    --control-pad-y: 0.55rem;
    --control-pad-x: 0.85rem;
    --control-h: calc(var(--control-text) * 1.25 + var(--control-pad-y) * 2 + var(--border-width) * 2);
    --target-min: 1.5rem;

    /* Tints of the primary over a surface: hover and selected. */
    --tint-faint: 5%;
    --tint-hover: 8%;
    --tint-selected: 14%;
    --tint-strong: 20%;

    /* Motion. */
    --duration-fast: 0.12s;
    --duration-normal: 0.2s;
    --duration-slow: 0.4s;

    /* Stacking order, lowest first. */
    --z-raised: 1;
    --z-sticky: 20;
    --z-popover: 30;
    --z-floating: 50;
    --z-overlay: 90;
    --z-skip: 100;

    /* Search fields' magnifier (a mid grey that reads in both themes). */
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

    /* Widths. */
    --measure: 72ch;          /* long-form text */
    --sidebar-width: 15rem;
    --dialog-width: 28rem;    /* dialogs set their own */
    /* The phone bottom bar's height (phones only): the page end and the
     * toast keep clear of it. */
    --bottom-bar-h: 0rem;
}

/* Phones: iOS Safari zooms into a field set below 16px when it gets focus;
 * the bottom bar shows (css/layout.css). */
@media (max-width: 39.99rem) {
    :root { --control-text: var(--text-base); --bottom-bar-h: 3.5rem; }
}
/* Fingers need bigger targets than a mouse pointer. */
@media (pointer: coarse) {
    :root { --target-min: 2.75rem; }
}

/* ---------- Colours ----------
 * boot.js sets data-theme="light" or "dark" on <html> before first paint
 * (from the saved choice, else the system setting), so these two blocks are
 * the only theme switch. */
:root, [data-theme="light"] {
    color-scheme: light;

    /* Surfaces: one white canvas, cards framed by a hairline; the
     * navigation (sidebar, phone top bar and drawer) on a cool tint. */
    --bg: #ffffff;
    --surface: #ffffff;
    --nav-bg: #f5f6fb;
    --surface-sunken: #fbfbfd;   /* card sections, inputs */
    --border: #e7e8f0;           /* dividers, card edges */
    --border-strong: #cfd5e2;    /* form controls */

    /* Text. */
    --text: #373c44;
    --text-heading: #2d3138;
    --text-muted: #646b79;
    --text-quiet: #5d6b89;       /* nav links */

    /* Blue primary: links and text in --primary, fills in --primary-fill
     * (white on it is 5.6:1). */
    --primary: #0172ad;
    --primary-hover: #015887;
    --primary-fill: #0172ad;
    --primary-fill-hover: #015887;
    --on-primary: #ffffff;
    --focus-ring: rgb(1 114 173 / 0.3);

    /* Quiet buttons: a soft grey fill under the text colour, no border. */
    --secondary-fill: #e8eaf0;
    --secondary-fill-hover: #d9dde6;
    --on-secondary: var(--text);

    /* Warm amber accent: --accent for fills and edges, --accent-text for text
     * (AA on cards). */
    --accent: #e08a1e;
    --accent-text: #9a4508;

    /* States. */
    --ok: #1c6a54;
    --danger: #c0392b;
    --danger-text: #b42318;
    --danger-fill-hover: #a33125;
    --on-danger: #ffffff;

    /* Highlights, overlays, elevation. */
    --mark-bg: #fde6bf;
    --mark-text: #0f1114;
    --selection: rgb(2 154 232 / 0.25);
    --overlay: rgb(232 234 237 / 0.75);
    --shadow-card: none;         /* cards rest flat; only floating things cast a shadow */
    --shadow-raised: 0 6px 24px rgb(20 22 40 / 0.1);
    --shadow-overlay: 0 12px 24px rgb(20 22 40 / 0.15);
    --symbol-tile: #ffffff;      /* behind the black symbol pictures */

    /* Form chrome drawn as SVG (stroke colour baked in per theme). */
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    color-scheme: dark;

    /* A slightly cool slate canvas, the navigation a shade deeper. */
    --bg: #191c28;
    --surface: #191c28;
    --nav-bg: #0f111a;
    --surface-sunken: #1f2331;
    --border: #2a2e3f;
    --border-strong: #353b4f;

    --text: #c2c7d0;
    --text-heading: #f0f1f3;
    --text-muted: #8b93a6;
    --text-quiet: #969eaf;

    /* The same blue, lightened for the deep canvas: dark text on the fill is
     * 8.5:1, links on cards 8.9:1. */
    --primary: #7cc4f0;
    --primary-hover: #a8d8f5;
    --primary-fill: #5fb4e6;
    --primary-fill-hover: #8ccbef;
    --on-primary: #0b0d14;
    --focus-ring: rgb(95 180 230 / 0.35);

    --secondary-fill: #2a2f3e;
    --secondary-fill-hover: #363c4e;
    --on-secondary: var(--text);

    --accent: #f4b458;
    --accent-text: #f4b458;

    --ok: #62af9a;
    --danger: #e06c5a;
    --danger-text: #f28b82;
    --danger-fill-hover: #e8897a;
    --on-danger: #17110f;

    --mark-bg: #014063;
    --mark-text: #ffffff;
    --selection: rgb(1 170 255 / 0.19);
    --overlay: rgb(8 9 10 / 0.75);
    --shadow-card: none;
    --shadow-raised: 0 8px 28px rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 12px 28px rgb(0 0 0 / 0.45);
    --symbol-tile: #ffffff;

    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136,145,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d14' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Muted text on a tinted surface (a selected row, a lesson tile): pulled
 * towards the text colour so it still clears AA on the tint. */
:root, [data-theme] {
    --muted-on-tint: color-mix(in srgb, var(--text-muted) 60%, var(--text));
}