/* tokens.css — Mathinker design tokens (Spec §2.6).
 *
 * Single source of truth for color, typography, spacing, radii and
 * shadows. Every value is a --mk-* custom property; component rules in
 * ui.css and figures.css consume tokens and never hard-code values.
 * Themes: :root is light; [data-theme="dark"] overrides the semantic
 * palette (set pre-paint by the inline snippet, see theme.js). Print
 * always re-asserts a grayscale-safe light palette. */

/* ---------------------------------------------------------------- fonts */
/* STIX Two Text (OFL) — content serif, harmonized with mathematical
 * typesetting; full Ukrainian Cyrillic. Falls back to Georgia if the
 * vendored files are absent. */
@font-face {
    font-family: "STIX Two Text";
    src: url("/static/vendor/stix/STIXTwoText-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "STIX Two Text";
    src: url("/static/vendor/stix/STIXTwoText-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "STIX Two Text";
    src: url("/static/vendor/stix/STIXTwoText-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "STIX Two Text";
    src: url("/static/vendor/stix/STIXTwoText-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------- light */
:root {
    color-scheme: light;

    /* Gray ramp — theme-invariant; figures and neutral fills draw from
     * here so printed output degrades to clean laser grayscale. */
    --mk-gray-50: #f7f8f9;
    --mk-gray-100: #eef0f2;
    --mk-gray-200: #e2e5e9;
    --mk-gray-300: #c9ced5;
    --mk-gray-400: #9aa2ac;
    --mk-gray-500: #6b7480;
    --mk-gray-600: #4d5560;
    --mk-gray-700: #374049;
    --mk-gray-800: #232a31;
    --mk-gray-900: #14181d;

    /* Semantic palette */
    --mk-bg: #ffffff;
    --mk-surface: var(--mk-gray-50);
    --mk-surface-2: var(--mk-gray-100);
    --mk-fg: #1a1d21;
    --mk-fg-muted: var(--mk-gray-500);
    --mk-border: var(--mk-gray-200);
    --mk-border-strong: var(--mk-gray-300);
    --mk-accent: #2456a4;
    --mk-accent-hover: #1d478a;
    --mk-accent-fg: #ffffff;
    --mk-danger: #a12b21;
    --mk-danger-bg: #fbeeec;
    --mk-ok: #1d6f3a;
    --mk-ok-bg: #e9f5ed;
    --mk-warn: #8a5a00;
    --mk-warn-bg: #fdf3e0;
    --mk-info: #1f4f8f;
    --mk-info-bg: #e9f0fa;
    --mk-ring: rgba(36, 86, 164, 0.45);

    /* Typography */
    --mk-font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
    --mk-font-content: "STIX Two Text", Georgia, "Times New Roman", serif;
    --mk-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;
    --mk-text-xs: 0.75rem;
    --mk-text-sm: 0.875rem;
    --mk-text-base: 1rem;
    --mk-text-lg: 1.125rem;
    --mk-text-xl: 1.375rem;
    --mk-text-2xl: 1.75rem;
    --mk-text-3xl: 2.25rem;
    --mk-leading-ui: 1.5;
    --mk-leading-content: 1.65;

    /* Spacing (4px base), radii, borders, shadows */
    --mk-space-1: 0.25rem;
    --mk-space-2: 0.5rem;
    --mk-space-3: 0.75rem;
    --mk-space-4: 1rem;
    --mk-space-5: 1.5rem;
    --mk-space-6: 2rem;
    --mk-space-7: 3rem;
    --mk-radius-sm: 0.25rem;
    --mk-radius-md: 0.375rem;
    --mk-radius-lg: 0.625rem;
    --mk-border-w: 1px;
    --mk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --mk-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
}

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

    --mk-bg: #12161b;
    --mk-surface: #191f26;
    --mk-surface-2: #20272f;
    --mk-fg: #e5e8eb;
    --mk-fg-muted: #98a2ad;
    --mk-border: #2b333c;
    --mk-border-strong: #3a444f;
    --mk-accent: #7fa9e6;
    --mk-accent-hover: #9dbeee;
    --mk-accent-fg: #0f1a2b;
    --mk-danger: #e08a82;
    --mk-danger-bg: #3a201d;
    --mk-ok: #7cc79a;
    --mk-ok-bg: #1b2f23;
    --mk-warn: #e0b566;
    --mk-warn-bg: #332a17;
    --mk-info: #8fb4e8;
    --mk-info-bg: #1c2a3d;
    --mk-ring: rgba(127, 169, 230, 0.5);
    --mk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --mk-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- print */
/* Laser printers: black text on white, borders in gray, status colors
 * collapse to black-on-white so nothing depends on ink color. */
@media print {
    :root,
    [data-theme="dark"] {
        color-scheme: light;
        --mk-bg: #ffffff;
        --mk-surface: #ffffff;
        --mk-surface-2: #ffffff;
        --mk-fg: #000000;
        --mk-fg-muted: #444444;
        --mk-border: #999999;
        --mk-border-strong: #666666;
        --mk-accent: #000000;
        --mk-accent-hover: #000000;
        --mk-accent-fg: #ffffff;
        --mk-danger: #000000;
        --mk-danger-bg: #ffffff;
        --mk-ok: #000000;
        --mk-ok-bg: #ffffff;
        --mk-warn: #000000;
        --mk-warn-bg: #ffffff;
        --mk-info: #000000;
        --mk-info-bg: #ffffff;
        --mk-shadow-1: none;
        --mk-shadow-2: none;
    }
}