/*
 * Design tokens — see docs/Design_System.md.
 *
 * This is the only file allowed to name a literal colour. Components refer to the semantic
 * tokens in the second block; a component that reaches for --green-600 directly fails review,
 * because a dark theme (D-87) would then have to be applied component by component.
 */

/* Inter, self-hosted (D-189). unicode-range lets the browser fetch latin-ext only on pages
   that actually contain Polish diacritics, so English pages pay nothing for them. */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-400-normal.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-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-ext-400-normal.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-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-600-normal.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-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-ext-600-normal.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-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-700-normal.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-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/webjars/fontsource__inter/files/inter-latin-ext-700-normal.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;
}

/* ---------------------------------------------------------------------------
   Primitive palette. Green is sampled from the visual reference (#248D39).
   Every other step exists to satisfy the contrast thresholds in D-87.
   --------------------------------------------------------------------------- */
:root {
    --white: #fff;
    --canvas: #f7f9fa;
    --border: #e3e8ec;

    --green-50: #f1f8f3;
    --green-100: #dcefe1;
    /* Reference green. 4.25:1 against white text — below AA, so decorative use only. */
    --green-500: #248d39;
    --green-600: #18813a;
    --green-700: #136b30;
    --green-800: #0e5124;

    --graphite-900: #1b1f23;
    --graphite-800: #212529;
    --graphite-700: #343a40;
    --gray-600: #5a6169;

    --red-100: #fbe3e5;
    --red-600: #b02a37;
    --red-800: #8c1d28;

    --amber-100: #fdf1dc;
    --amber-800: #8a3f07;
}

/* ---------------------------------------------------------------------------
   Semantic tokens. These are what components use.
   --------------------------------------------------------------------------- */
:root {
    --color-canvas: var(--canvas);
    --color-surface: var(--white);
    --color-surface-accent: var(--green-50);
    --color-border: var(--border);

    --color-text: var(--graphite-900);
    --color-text-secondary: var(--graphite-700);
    --color-text-muted: var(--gray-600);
    --color-text-on-action: var(--white);
    --color-text-accent: var(--green-700);

    --color-action: var(--green-600);
    --color-action-hover: var(--green-700);
    --color-action-active: var(--green-800);
    --color-focus-ring: var(--green-700);

    --color-positive-surface: var(--green-100);
    --color-positive-text: var(--green-800);
    --color-danger: var(--red-600);
    --color-danger-surface: var(--red-100);
    --color-danger-text: var(--red-800);
    --color-warning-surface: var(--amber-100);
    --color-warning-text: var(--amber-800);

    /* D-81 requires an offline server card to be visually toned down. */
    --color-muted-surface: var(--canvas);
    --color-muted-text: var(--gray-600);

    --font-family-base: Inter, system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.25rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-meta: 0.8125rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Two shadows and no third: chapter 52.10 warns against overusing them, and a fixed
       scale is easier to hold to than the instruction "use sparingly". */
    --shadow-sm: 0 1px 2px rgb(27 31 35 / 6%);
    --shadow-md: 0 2px 8px rgb(27 31 35 / 8%);
}

/* ---------------------------------------------------------------------------
   Bootstrap 5.3 overrides. Bootstrap reads its own custom properties, so setting
   --bs-primary alone does not restyle a button: each component has its own variables.
   --------------------------------------------------------------------------- */
:root {
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-body);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-canvas);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-primary: var(--color-action);
    --bs-link-color: var(--color-text-accent);
    --bs-link-hover-color: var(--color-action-active);
    /* Bootstrap 5.3 colours a link through the -rgb pair, because it multiplies it by an
       opacity variable. Setting only the two above leaves every link the stock blue. */
    --bs-link-color-rgb: 19, 107, 48;
    --bs-link-hover-color-rgb: 14, 81, 36;
    /* Inline code is an address or a token here, not a warning, so it takes the body colour
       rather than Bootstrap's pink. */
    --bs-code-color: var(--color-text-secondary);
    --bs-focus-ring-color: var(--color-focus-ring);
}

body {
    background-color: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-family-base);
    line-height: 1.5;
}

h1,
h2,
h3 {
    color: var(--color-text);
    line-height: 1.25;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
}

/*
 * One focus outline for every interactive element. A CSS reset commonly removes the browser
 * default, which would leave the interface unusable by keyboard — and D-87 requires full
 * keyboard operation.
 */
:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}