/* ═══════════════════════════════════════════════════════════════════════════
   Lamplight — the shared design tokens and fonts (R85).

   ONE definition of the palette, type and shape, used by both theme layers:
     .sx  the student pages   (css/student/student.css)
     .st  the staff pages     (css/staff/staff.css)
   Lifted verbatim out of student.css when the staff theme was built, so the
   student pages render exactly as they did.

   Dark mode: students follow the system preference (or a forced data-theme);
   staff are LIGHT unless they choose dark (`:root[data-theme="dark"]`, set
   from the toggle in _LayoutAdmin). A daytime work tool should not flip on
   its own.

   🔴 Everything except @font-face is inside `@media screen`: print never sees a
   token, so no print output can move because of this file.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Figtree";
    src: url("../student/fonts/figtree-var-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../student/fonts/instrument-serif-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media screen {

/* ── Tokens: Lamplight, light ─────────────────────────────────────────────── */
.sx, .st {
    --sx-bg: #f6f0e4;
    --sx-surface: #fffbf3;
    --sx-surface-2: #f2e9da;
    --sx-ink: #1c1932;
    --sx-ink-2: #57526b;
    --sx-line: #e3d7c3;
    --sx-line-strong: #8c7f6a;
    --sx-primary: #2b2766;
    --sx-primary-hover: #3a358a;
    --sx-on-primary: #fffbf3;
    --sx-accent: #f0a93b;
    --sx-accent-ink: #8a4b05;
    --sx-accent-soft: #fbe7c4;
    --sx-focus: #b45f06;
    --sx-ok-bg: #e2efdc;   --sx-ok-ink: #24502a;
    --sx-warn-bg: #fbe9c8; --sx-warn-ink: #6b4100;
    --sx-info-bg: #e3e6f6; --sx-info-ink: #2b2766;
    --sx-danger: #a3271b;  --sx-danger-bg: #f8dfda;
    --sx-track: #ebe1cf;

    --sx-g-a: #f5b754; --sx-g-a-ink: #3a2500;
    --sx-g-b: #d3e6cc; --sx-g-b-ink: #1f3b1c;
    --sx-g-c: #d9e3f5; --sx-g-c-ink: #1c2f55;
    --sx-g-d: #f2d6c7; --sx-g-d-ink: #5a2412;
    --sx-g-f: #f3d0d5; --sx-g-f-ink: #6b1020;

    --sx-glow: radial-gradient(70% 55% at 15% -5%, rgb(240 169 59 / .26), transparent 70%),
               radial-gradient(50% 40% at 100% 0%, rgb(43 39 102 / .07), transparent 70%);
    --sx-halo: 0 0 0 1px rgb(240 169 59 / .25), 0 18px 50px -18px rgb(240 169 59 / .55);
    --sx-shadow: 0 1px 0 rgb(28 25 50 / .04), 0 10px 30px -14px rgb(28 25 50 / .22);
    --sx-shadow-hover: 0 1px 0 rgb(28 25 50 / .04), 0 18px 40px -16px rgb(28 25 50 / .30);
    --sx-border-w: 1px;
    --sx-radius: 14px;
    --sx-radius-lg: 22px;
    --sx-radius-pill: 999px;

    --sx-font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
    --sx-font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sx-display-style: italic;
    --sx-display-weight: 400;
    --sx-display-tracking: -0.01em;

    --sx-fs-xs: .8125rem;
    --sx-fs-sm: .9375rem;
    --sx-fs-md: 1.0625rem;
    --sx-fs-lg: 1.25rem;
    --sx-fs-xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
    --sx-fs-2xl: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);

    color-scheme: light;
}

/* ── Tokens: Lamplight, dark (system preference OR forced) ────────────────── */
@media (prefers-color-scheme: dark) {
    .sx:not([data-theme="light"]) {
        --sx-bg: #100f24;
        --sx-surface: #1a1936;
        --sx-surface-2: #23223f;
        --sx-ink: #f4ecdc;
        --sx-ink-2: #b9b2cc;
        --sx-line: #33305a;
        --sx-line-strong: #6f6aa0;
        --sx-primary: #f2b14c;
        --sx-primary-hover: #f7c573;
        --sx-on-primary: #1b1300;
        --sx-accent: #f2b14c;
        --sx-accent-ink: #f6c172;
        --sx-accent-soft: #3a2e24;
        --sx-focus: #f6c172;
        --sx-ok-bg: #1f3424;   --sx-ok-ink: #bfe6c3;
        --sx-warn-bg: #3a2c14; --sx-warn-ink: #f6d59a;
        --sx-info-bg: #24264a; --sx-info-ink: #d6d9fb;
        --sx-danger: #ff9b8f;  --sx-danger-bg: #3d1f22;
        --sx-track: #2b2a4c;
        --sx-g-a: #f5b754; --sx-g-a-ink: #2a1a00;
        --sx-g-b: #2f4a33; --sx-g-b-ink: #d8f0d2;
        --sx-g-c: #2c3c5c; --sx-g-c-ink: #dbe6fb;
        --sx-g-d: #5a3326; --sx-g-d-ink: #f8dccf;
        --sx-g-f: #5b2530; --sx-g-f-ink: #fbd5dc;
        --sx-glow: radial-gradient(70% 55% at 15% -5%, rgb(242 177 76 / .20), transparent 70%),
                   radial-gradient(60% 50% at 100% 10%, rgb(96 86 210 / .22), transparent 70%);
        --sx-halo: 0 0 0 1px rgb(242 177 76 / .35), 0 20px 60px -16px rgb(242 177 76 / .45);
        --sx-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 14px 34px -16px rgb(0 0 0 / .7);
        --sx-shadow-hover: 0 1px 0 rgb(255 255 255 / .05) inset, 0 20px 44px -16px rgb(0 0 0 / .8);
        color-scheme: dark;
    }
}
.sx[data-theme="dark"],
:root[data-theme="dark"] .st {
    --sx-bg: #100f24;
    --sx-surface: #1a1936;
    --sx-surface-2: #23223f;
    --sx-ink: #f4ecdc;
    --sx-ink-2: #b9b2cc;
    --sx-line: #33305a;
    --sx-line-strong: #6f6aa0;
    --sx-primary: #f2b14c;
    --sx-primary-hover: #f7c573;
    --sx-on-primary: #1b1300;
    --sx-accent: #f2b14c;
    --sx-accent-ink: #f6c172;
    --sx-accent-soft: #3a2e24;
    --sx-focus: #f6c172;
    --sx-ok-bg: #1f3424;   --sx-ok-ink: #bfe6c3;
    --sx-warn-bg: #3a2c14; --sx-warn-ink: #f6d59a;
    --sx-info-bg: #24264a; --sx-info-ink: #d6d9fb;
    --sx-danger: #ff9b8f;  --sx-danger-bg: #3d1f22;
    --sx-track: #2b2a4c;
    --sx-g-a: #f5b754; --sx-g-a-ink: #2a1a00;
    --sx-g-b: #2f4a33; --sx-g-b-ink: #d8f0d2;
    --sx-g-c: #2c3c5c; --sx-g-c-ink: #dbe6fb;
    --sx-g-d: #5a3326; --sx-g-d-ink: #f8dccf;
    --sx-g-f: #5b2530; --sx-g-f-ink: #fbd5dc;
    --sx-glow: radial-gradient(70% 55% at 15% -5%, rgb(242 177 76 / .20), transparent 70%),
               radial-gradient(60% 50% at 100% 10%, rgb(96 86 210 / .22), transparent 70%);
    --sx-halo: 0 0 0 1px rgb(242 177 76 / .35), 0 20px 60px -16px rgb(242 177 76 / .45);
    --sx-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 14px 34px -16px rgb(0 0 0 / .7);
    --sx-shadow-hover: 0 1px 0 rgb(255 255 255 / .05) inset, 0 20px 44px -16px rgb(0 0 0 / .8);
    color-scheme: dark;
}

} /* @media screen */