/*
    Day One Anatomy design system: fonts, tokens, base styles.
    Shared by app, admin area and website (plan C10, D6). Components use
    only these variables, never raw colors.
*/

/*-------------------------------------------------------------------------------------------------
    Fonts (SIL OFL, bundled, see fonts/OFL-*.txt)
-------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: "Nunito";
    src: url("../fonts/Nunito.ttf") format("truetype");
    font-weight: 200 1000;
    font-display: block;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces.ttf") format("truetype");
    font-weight: 100 900;
    font-display: block;
}

/*-------------------------------------------------------------------------------------------------
    Tokens: light
-------------------------------------------------------------------------------------------------*/

:root {
    color-scheme: light dark;

    /* All text pairs meet WCAG AA (4.5:1), checked in the audit 2026-11-03. */
    --bg: #F3EEE3;
    --surface: #FFFFFF;
    --surface-2: #F8F4EA;
    --border: #E4DECC;
    --border-strong: #D6CFBA;

    --primary: #507262;
    --on-primary: #FFFFFF;
    --primary-dark: #1A4D2E;
    --primary-edge: #3B5649;
    --primary-tint: #D4E6DA;

    --accent: #925100;
    --accent-tint: #F2DCC4;

    --info: #3F6E7A;
    --info-tint: #E0F2F7;
    --info-edge: #8FB4BF;

    --plum: #7B4C9E;
    --plum-tint: #EEE1F6;
    --bronze: #B06A3B;
    --bronze-edge: #7E4A27;
    --silver: #8E9AA3;
    --silver-edge: #66717A;
    --gold: #C99A1E;
    --gold-edge: #94700F;

    --error: #AA3C32;
    --error-edge: #862C24;
    --on-error: #FFFFFF;
    --error-tint: #F7DAD8;

    --text: #1E2420;
    --text-muted: #62665F;
    --locked: #D8D1C2;
    --locked-edge: #BFB7A6;
    --card-edge: #E4DECC;

    /* Course map (design D25): props on the ground around the path. Paper
       is white paper and bone, shade darkens shadows, ink is the dark of an
       x-ray panel. Course colors come from the course theme. */
    --map-paper: #FFFFFF;
    --map-shade: #1E2420;
    --map-ink: #22302A;

    --font-ui: "Nunito", system-ui, sans-serif;
    --font-display: "Fraunces", Georgia, serif;

    --radius: 16px;
    --radius-small: 10px;
    --edge: 4px;
    --tap: 48px;

    --motion-fast: 120ms;
    --motion: 220ms;
}

/* A page can stay light whatever the system says (the website: light is
   the main style). */
:root[data-theme="light"] {
    color-scheme: light;
}

/*-------------------------------------------------------------------------------------------------
    Tokens: dark
-------------------------------------------------------------------------------------------------*/

/* Warm charcoal (design D24): neutral warm ground, cream text, green and
   ochre only where the brand acts. Layers step up in lightness; every text
   pair meets WCAG AA, the weakest at 6:1. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1A1917;
        --surface: #23221F;
        --surface-2: #2C2B27;
        --border: #383631;
        --border-strong: #4A4740;

        --primary: #7FB89A;
        --on-primary: #0E1F16;
        --primary-dark: #CFE8D9;
        --primary-edge: #4F8468;
        --primary-tint: #26362D;

        --accent: #E9A55A;
        --accent-tint: #3B2C1A;

        --info: #7DBFCC;
        --info-tint: #1D3236;
        --info-edge: #4A8995;

        --plum: #C9A3E6;
        --plum-tint: #2F2638;
        --bronze: #B06A3B;
        --bronze-edge: #7E4A27;
        --silver: #8E9AA3;
        --silver-edge: #66717A;
        --gold: #C99A1E;
        --gold-edge: #94700F;

        --error: #F28B7D;
        --error-edge: #B5574A;
        --error-tint: #3B2220;
        --on-error: #2A0D09;

        --text: #F3EEE3;
        --text-muted: #B4AEA2;
        --locked: #302E2A;
        --locked-edge: #222120;
        --card-edge: #121110;

        --map-paper: #E6E0D3;
        --map-shade: #0B0A09;
        --map-ink: #4A4740;
    }
}

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


/*-------------------------------------------------------------------------------------------------
    Base
-------------------------------------------------------------------------------------------------*/

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
}

.display {
    font-family: var(--font-display);
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.muted {
    color: var(--text-muted);
}

.card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--info);
    outline-offset: 2px;
}

/* Blazor shows this on an unhandled error by setting display: block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 14px 20px;
    background: var(--error-tint);
    color: var(--error);
    font-weight: 800;
}

#blazor-error-ui .reload {
    margin-left: 8px;
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Large screens held at arm's length (iPad, open foldables): one step larger
   type, so a lesson does not look lost on the screen. Sizes in rem follow. */
@media (min-width: 768px) and (min-height: 760px) {
    html {
        font-size: 18px;
    }
}


/*-------------------------------------------------------------------------------------------------
    Course themes (design D25): one color family per course, by position
    (moss, coral, ochre, teal, plum, then again). Unit banners, lesson
    nodes and course cards read these; everything is mixed from the tokens
    above.
-------------------------------------------------------------------------------------------------*/

.map-theme-0 { --course: var(--primary); --course-tint: var(--primary-tint); }
.map-theme-1 { --course: var(--error); --course-tint: var(--error-tint); }
.map-theme-2 { --course: var(--accent); --course-tint: var(--accent-tint); }
.map-theme-3 { --course: var(--info); --course-tint: var(--info-tint); }
.map-theme-4 { --course: var(--plum); --course-tint: var(--plum-tint); }

.map-theme-0, .map-theme-1, .map-theme-2, .map-theme-3, .map-theme-4 {
    --course-edge: color-mix(in srgb, var(--course) 66%, var(--map-shade));
    --course-ring: color-mix(in srgb, var(--course) 30%, transparent);
}