/*
 * Typefaces: Copyright 2018 The Manrope Project Authors (https://github.com/sharanda/manrope)
 * and Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader).
 * Both licensed under SIL Open Font License 1.1; full text at fonts/OFL-Manrope.txt and fonts/OFL-Newsreader.txt
 */

/*
 * The Artisanal Syllabus — the single authored token source in this repository.
 *
 * Every value below is transcribed from tokens/theme.css in The Artisanal
 * Syllabus design system on Claude Design, which is the authority. Do not add a
 * colour, type step, spacing step, radius or elevation value that the design
 * system does not name, and do not declare tokens in an application stylesheet.
 */

/* ---- Typefaces, self-hosted ------------------------------------------- */

@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    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-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-display: swap;
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 300 700;
    src: url('../fonts/newsreader-latin.woff2') format('woff2');
    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-display: swap;
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 300 700;
    src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-display: swap;
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 300 700;
    src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
    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-display: swap;
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 300 700;
    src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Canonical token block -------------------------------------------- */

:root {
    --primary: #012d1d;
    --primary-container: #1b4332;
    --on-primary: #fcf9f4;
    --secondary: #9a442d;
    --secondary-fixed-dim: #ffb59b;
    --tertiary-fixed-dim: #ffb780;

    --surface: #fcf9f4;
    --surface-container-lowest: #fffdf9;
    --surface-container-low: #f6f3ee;
    --surface-container: #f0ede8;
    --surface-container-high: #e5e2dd;
    --surface-container-highest: #dfdbd4;

    --on-surface: #1c1c19;
    --on-surface-variant: #414844;
    --outline: #717973;
    --outline-variant: #c1c8c2;
    --ghost-border: rgba(193, 200, 194, 0.15);

    --ok: #059669;
    --warn: #d97706;
    --bad: #ba1a1a;
    --unknown: #717973;
    --chip-ok-bg: #dff4e8;      --chip-ok-fg: #047857;
    --chip-warn-bg: #fff2d8;    --chip-warn-fg: #92400e;
    --chip-bad-bg: #ffdad6;     --chip-bad-fg: #93000a;
    --chip-unknown-bg: #e5e2dd; --chip-unknown-fg: #414844;

    --panel-dark-bg: rgba(49, 48, 45, 0.78);
    --panel-dark-fg: #f3f0eb;
    --panel-dark-accent: #a5d0b9;

    --font-display: Newsreader, Georgia, "Times New Roman", serif;
    --font-body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /*
     * The type scale named on the design system's Typography card. display-lg and
     * label-md are ratified; the intervening steps are the card's proposed values.
     * A raw rem in a font-size declaration is a magic value — use these instead, so
     * a step can be retuned in one place rather than hunted through four apps.
     *
     * These are transcribed from that card and not from the design system's
     * `tokens/theme.css`, which declares no type step at all — it stops at the two
     * font families. Do not read that absence as permission to delete them: they
     * are the card's own values, and roughly forty declarations across the four
     * Blazor apps resolve through them, every one of which would fall back to an
     * initial font-size or letter-spacing. The design system's token file is what
     * needs the addition, in the same names and values as below.
     */
    --display-lg: 3.5rem;    --display-md: 2.75rem;   --display-sm: 2.25rem;
    --headline-lg: 1.75rem;  --headline-md: 1.5rem;   --headline-sm: 1.25rem;
    --title-lg: 1.125rem;
    --body-lg: 1.125rem;     --body-md: 1rem;         --body-sm: 0.875rem;
    --label-md: 0.75rem;

    /*
     * The action label step, carried by PrimaryAction, SecondaryAction and
     * PlannedAction. This one is named nowhere in the design system — not on the
     * Typography card and not in its token file — and is a name given here to a
     * value those three components already shared. It is the one token below that
     * the design system would be adopting rather than being caught up to.
     */
    --action-md: 0.9375rem;

    /* Tracking that travels with a step rather than being retyped at each site. */
    --tracking-display: -0.02em;
    --tracking-display-sm: -0.015em;
    --tracking-label: 0.05em;

    --spacing-1: 0.25rem;  --spacing-2: 0.5rem;   --spacing-3: 0.75rem;
    --spacing-4: 1rem;     --spacing-5: 1.25rem;  --spacing-6: 1.5rem;
    --spacing-7: 2rem;     --spacing-8: 2.5rem;   --spacing-9: 3rem;
    --spacing-10: 3.5rem;  --spacing-11: 4rem;    --spacing-12: 5rem;

    --rounded-sm: 0.125rem;  --rounded-DEFAULT: 0.25rem;  --rounded-full: 9999px;

    --shadow-ambient: 0 12px 32px -4px rgba(28, 28, 25, 0.08);
    --gradient-cta: linear-gradient(135deg, #012d1d, #1b4332);
    --glass-bg: rgba(252, 249, 244, 0.8);
    --glass-blur: blur(12px);
    --focus-ring: 3px solid rgba(154, 68, 45, 0.38);
}

/* ---- Shared document base --------------------------------------------- */

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

html,
body {
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100%;
}

a {
    color: inherit;
}

h1:focus {
    outline: none;
}

/* ---- Blazor error banner ---------------------------------------------- */

#blazor-error-ui {
    background: var(--chip-warn-bg);
    bottom: 0;
    box-shadow: var(--shadow-ambient);
    color: var(--chip-warn-fg);
    color-scheme: light only;
    display: none;
    left: 0;
    padding: var(--spacing-3) var(--spacing-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--spacing-3);
    top: var(--spacing-2);
}

#blazor-error-ui .reload:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* ---- Boot loader ------------------------------------------------------ */
/*
 * Blazor's circular radial loader is the settled choice for all four apps.
 * The Progress "Horizon" documented in the design system is deferred by owner
 * decision and is deliberately not built here.
 */

.loading-progress {
    display: block;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
    position: absolute;
    width: 8rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--surface-container-high);
    stroke-width: 0.6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    color: var(--on-surface);
    font-weight: 700;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    position: absolute;
    text-align: center;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}