/* tokens.css
   Design tokens: color, type, spacing, radius, elevation, motion.
   Light is the default; dark follows the system unless the viewer picks a theme
   (html[data-theme="light" | "dark"]). Text size comes from html[data-text].
   Printing always uses the light palette (see the end of this file). */

@font-face {
    font-family: 'Lexend';
    src: url('../assets/fonts/lexend-latin-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* surfaces */
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f0f3f8;
    --surface-3: #e6ebf2;
    --line: #e1e6ee;
    --line-strong: #c9d1dd;
    --scrim: rgba(12, 20, 34, 0.48);

    /* text */
    --ink: #0f1a2a;
    --ink-2: #3d4a5d;
    --ink-3: #5c677a;
    --ink-inverse: #ffffff;

    /* brand: teal, with an amber highlight */
    --brand: #0d8577;
    --brand-strong: #096a5f;
    --brand-soft: #e0f3ef;
    --brand-softer: #f0faf8;
    --on-brand: #ffffff;
    --accent: #f2a516;
    --accent-strong: #946000;
    --accent-soft: #fff2d4;

    /* status */
    --good: #17905a;
    --good-soft: #e1f5e9;
    --warn: #b86e00;
    --warn-soft: #fff0d6;
    --bad: #cf3d4b;
    --bad-soft: #fde7e9;
    --info: #2a66d6;
    --info-soft: #e5edfc;

    /* units */
    --u-matter: #6c58f0;
    --u-energy: #ea6a24;
    --u-acids: #d23f88;
    --u-identify: #1f82d8;

    /* the lab bench is always lit, in either theme */
    --bench-top: #f7fafc;
    --bench-bottom: #e7eef5;
    --bench-ink: #1d2a3a;
    --bench-line: #d6dfe8;

    /* type */
    --font: 'Lexend', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.9375rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-body: 1.55;

    /* space */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;
    --s-10: 72px;
    --gutter: clamp(16px, 3vw, 32px);
    --page-max: 1240px;

    /* shape */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* elevation */
    --shadow-1: 0 1px 2px rgba(15, 26, 42, 0.06), 0 1px 1px rgba(15, 26, 42, 0.03);
    --shadow-2: 0 6px 16px -4px rgba(15, 26, 42, 0.10), 0 2px 4px rgba(15, 26, 42, 0.05);
    --shadow-3: 0 22px 48px -12px rgba(15, 26, 42, 0.24), 0 4px 10px rgba(15, 26, 42, 0.06);
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

    /* motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 120ms;
    --t-med: 220ms;
    --t-slow: 420ms;

    --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0a111e;
        --surface: #111a2b;
        --surface-2: #172238;
        --surface-3: #1e2a43;
        --line: #243250;
        --line-strong: #33425f;
        --scrim: rgba(2, 6, 14, 0.66);
        --ink: #e8edf5;
        --ink-2: #b3bdcd;
        --ink-3: #8592a7;
        --brand: #27bfa9;
        --brand-strong: #5ad6c3;
        --brand-soft: #0f2f2b;
        --brand-softer: #0e2522;
        --on-brand: #04201c;
        --accent: #f6b73c;
        --accent-strong: #f8c766;
        --accent-soft: #33280f;
        --good: #3cc483;
        --good-soft: #10301f;
        --warn: #f0a83c;
        --warn-soft: #33250e;
        --bad: #f0707b;
        --bad-soft: #3a161b;
        --info: #6b9cf5;
        --info-soft: #14244a;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-2: 0 8px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-3: 0 24px 54px -12px rgba(0, 0, 0, 0.7);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a111e;
    --surface: #111a2b;
    --surface-2: #172238;
    --surface-3: #1e2a43;
    --line: #243250;
    --line-strong: #33425f;
    --scrim: rgba(2, 6, 14, 0.66);
    --ink: #e8edf5;
    --ink-2: #b3bdcd;
    --ink-3: #8592a7;
    --brand: #27bfa9;
    --brand-strong: #5ad6c3;
    --brand-soft: #0f2f2b;
    --brand-softer: #0e2522;
    --on-brand: #04201c;
    --accent: #f6b73c;
    --accent-strong: #f8c766;
    --accent-soft: #33280f;
    --good: #3cc483;
    --good-soft: #10301f;
    --warn: #f0a83c;
    --warn-soft: #33250e;
    --bad: #f0707b;
    --bad-soft: #3a161b;
    --info: #6b9cf5;
    --info-soft: #14244a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 24px 54px -12px rgba(0, 0, 0, 0.7);
}

html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

/* Paper is white, so printing uses the light palette in every theme. Without this,
   dark-theme text prints pale gray on white. These are the light values from the
   top of this file; the selectors match both dark blocks above and come later. */
@media print {
    :root:not([data-theme="light"]), :root[data-theme="dark"] {
        color-scheme: light;
        --bg: #f4f6fa;
        --surface: #ffffff;
        --surface-2: #f0f3f8;
        --surface-3: #e6ebf2;
        --line: #e1e6ee;
        --line-strong: #c9d1dd;
        --scrim: rgba(12, 20, 34, 0.48);
        --ink: #0f1a2a;
        --ink-2: #3d4a5d;
        --ink-3: #5c677a;
        --brand: #0d8577;
        --brand-strong: #096a5f;
        --brand-soft: #e0f3ef;
        --brand-softer: #f0faf8;
        --on-brand: #ffffff;
        --accent: #f2a516;
        --accent-strong: #946000;
        --accent-soft: #fff2d4;
        --good: #17905a;
        --good-soft: #e1f5e9;
        --warn: #b86e00;
        --warn-soft: #fff0d6;
        --bad: #cf3d4b;
        --bad-soft: #fde7e9;
        --info: #2a66d6;
        --info-soft: #e5edfc;
        --shadow-1: 0 1px 2px rgba(15, 26, 42, 0.06), 0 1px 1px rgba(15, 26, 42, 0.03);
        --shadow-2: 0 6px 16px -4px rgba(15, 26, 42, 0.10), 0 2px 4px rgba(15, 26, 42, 0.05);
        --shadow-3: 0 22px 48px -12px rgba(15, 26, 42, 0.24), 0 4px 10px rgba(15, 26, 42, 0.06);
    }
}