/* CASE 17 – design tokens and page basics shared by every component.
   Component styling lives in each component's isolated .razor.css; only values that
   must be identical everywhere (colors, fonts, spacing, shadows) are defined here. */

/* Bundled fonts (SIL Open Font License, see wwwroot/fonts/*-OFL.txt): work offline and in the mobile app. */
@font-face {
    font-family: "Oswald";
    src: url("../fonts/Oswald.woff2") format("woff2");
    font-weight: 200 700;
    font-display: swap;
}

@font-face {
    font-family: "Courier Prime";
    src: url("../fonts/CourierPrime-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Courier Prime";
    src: url("../fonts/CourierPrime-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Caveat";
    src: url("../fonts/Caveat.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans.woff2") format("woff2");
    font-weight: 100 700;
    font-stretch: 85% 100%;
    font-display: swap;
}

:root {
    /* Desk and board */
    --wood-1: #2c1e15;
    --wood-2: #32221a;
    --wood-3: #281a12;
    --wood-4: #2f2018;
    --cork: #a9784a;
    --cork-frame: #4a3020;

    /* Paper and ink */
    --paper: #f4ebd6;
    --paper-bright: #fbf8f0;
    --folder: #d9b57a;
    --sticky: #f2d06b;
    --ink: #2a1d14;
    --ink-muted: #7a5a3a;
    --desk-text: #f3e9d6;

    /* Accents */
    --string-red: #b3261e;
    --copper: #e9a86a;
    --verified: #2f7d55;

    /* Type: bundled fonts first, system fonts as fallback. */
    --font-title: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
    --font-typed: "Courier Prime", "Courier New", monospace;
    --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
    --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;

    --shadow-paper: 0 6px 12px rgba(0, 0, 0, 0.35);
}

html,
body {
    margin: 0;
    background: var(--wood-1);
    color: var(--desk-text);
    font-family: var(--font-text);
    -webkit-tap-highlight-color: transparent;
}

a {
    color: #f0c08a;
}

a:hover {
    color: #ffd9ae;
}

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

/* Headings focused by the router after navigation (for screen readers) need no visible ring. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Shown by the hosts while the app starts. */
.app-loading {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: var(--font-typed);
    color: var(--desk-text);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--space-3);
    background: var(--sticky);
    color: var(--ink);
    font-family: var(--font-typed);
}

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