/* ==========================================================================
   CodeClass - design tokens
   Warm paper + graphite shell, teal ink, amber for attention.
   Both themes are defined here; nothing below this file hardcodes a colour.
   ========================================================================== */

:root {
    /* ---- type ---------------------------------------------------------- */
    /* Headings are read, not admired. Instrument Serif ships one weight (400)
       and draws thin high-contrast strokes, so every heading was light whether
       or not it asked to be bold, which is a poor deal on a screen a class
       reads instructions off. Archivo is already here in four weights. */
    --font-display: 'Archivo', 'Segoe UI Variable Display', 'Segoe UI', Tahoma, sans-serif;
    /* Kept for the wordmark, which is a logo seen once and not read. */
    --font-brand: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-ui: 'Archivo', 'Segoe UI Variable Text', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

    --text-2xs: 0.6875rem;  /* 11px - table meta, badges */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px - dense UI default */
    --text-base: 0.9375rem; /* 15px - body */
    --text-md: 1.0625rem;   /* 17px */
    --text-lg: 1.375rem;    /* 22px */
    --text-xl: 1.875rem;    /* 30px */
    --text-2xl: 2.5rem;     /* 40px */

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;

    /* ---- space (4px base) ---------------------------------------------- */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.25rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s10: 2.5rem;
    --s12: 3rem;
    --s16: 4rem;

    /* ---- radius / depth ------------------------------------------------ */
    --r-sm: 4px;
    --r: 7px;
    --r-lg: 12px;
    --r-xl: 18px;
    --r-pill: 999px;

    /* ---- layout -------------------------------------------------------- */
    --header-h: 56px;
    --sidebar-w: 244px;
    --rail-w: 60px;
    --content-max: 1180px;

    --dur-fast: 110ms;
    --dur: 180ms;
    --dur-slow: 320ms;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    --z-sticky: 20;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 100;
    --z-popover: 120;
}

/* ==========================================================================
   Light - "paper". Default for teacher work: rosters, gradebook, authoring.
   ========================================================================== */
:root,
[data-theme='light'] {
    color-scheme: light;

    --bg: #f6f4ef;
    --bg-sunk: #ece8e0;
    --surface: #fffefb;
    --surface-2: #f9f7f2;
    --surface-3: #f1eee6;
    --overlay: rgba(28, 25, 20, 0.42);

    --ink: #191713;
    --ink-2: #4a453d;
    --ink-3: #756e63;
    --ink-4: #6f685d;

    --line: #ded8cc;
    --line-2: #cfc7b8;
    --line-strong: #b6ab98;
    /* Form controls are identified by their outline and nothing else, so this
       one has to clear 3:1 against every background it sits on (WCAG 1.4.11).
       Kept separate from --line-2 so cards and buttons, which are identified
       by their fill, are not dragged along with it. */
    --line-control: #948364;

    --brand: #0f6f66;
    --brand-ink: #0b544d;
    --brand-soft: #dff0ed;
    --brand-soft-ink: #0b544d;
    --on-brand: #ffffff;

    --attn: #b05109;
    --attn-soft: #fbeedb;

    --ok: #1f7a45;
    --ok-soft: #dff2e5;
    --warn: #956400;
    --warn-soft: #fbf0d0;
    --bad: #b3261e;
    --bad-soft: #fbe4e2;
    --info: #1d5fb8;
    --info-soft: #e0ebfb;
    --muted-soft: #eae6dd;

    --focus: #0f6f66;
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--focus) 55%, transparent);

    --shadow-1: 0 1px 2px rgba(38, 32, 22, 0.07), 0 1px 1px rgba(38, 32, 22, 0.04);
    --shadow-2: 0 2px 4px rgba(38, 32, 22, 0.06), 0 6px 16px -6px rgba(38, 32, 22, 0.14);
    --shadow-3: 0 12px 32px -8px rgba(38, 32, 22, 0.22), 0 4px 10px rgba(38, 32, 22, 0.08);

    --grain-opacity: 0.5;
    --code-theme: 'darcula';
}

/* ==========================================================================
   Dark - "graphite". Default for the coding workspace and the live monitor.
   ========================================================================== */
[data-theme='dark'] {
    color-scheme: dark;

    --bg: #101215;
    --bg-sunk: #0a0c0e;
    --surface: #181b20;
    --surface-2: #1e2228;
    --surface-3: #262b32;
    --overlay: rgba(4, 6, 8, 0.62);

    --ink: #eceef1;
    --ink-2: #b6bcc5;
    --ink-3: #8b939e;
    --ink-4: #8a929c;

    --line: #2a2f36;
    --line-2: #363c45;
    --line-strong: #4a525c;
    --line-control: #687485;

    --brand: #2fb3a3;
    --brand-ink: #7fd8cc;
    --brand-soft: #12302e;
    --brand-soft-ink: #7fd8cc;
    --on-brand: #05201d;

    --attn: #e2a14c;
    --attn-soft: #38291a;

    --ok: #4ec37c;
    --ok-soft: #14301f;
    --warn: #dcae4b;
    --warn-soft: #322817;
    --bad: #f0736a;
    --bad-soft: #3a1e1c;
    --info: #6ea8f0;
    --info-soft: #17263a;
    --muted-soft: #242930;

    --focus: #2fb3a3;
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--focus) 60%, transparent);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);

    --grain-opacity: 0.28;
}

/* Density: classrooms project onto a screen at the back of the room. */
[data-density='comfortable'] {
    --row-h: 44px;
    --pad-cell: var(--s3);
}

:root,
[data-density='compact'] {
    --row-h: 36px;
    --pad-cell: var(--s2);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
        --dur-slow: 0ms;
    }
}