/* Design tokens in the SponsOss palette (docs/brand/README.md). The full layout and component
   set is its own board item ("Base layout and design tokens for phone and PC"). */
:root {
    --brand: #F7D774;          /* smør: fills, buttons, highlights */
    --brand-strong: #E9B84A;   /* honning: hover, depth */
    --on-brand: #2E2A24;       /* text on smør */
    --accent: #C99419;         /* gull: decoration only, never body text on white */
    --ink: #2E2A24;            /* blekk: text and outlines, 14:1 on white */
    --muted: #6B6358;          /* 5.9:1 on white */
    --link: #7A5A0E;           /* dark gold, 6.4:1 on white */
    --line: #EFE6CF;
    --surface: #FFF6D9;        /* krem */
    --background: #FFFFFF;
    --danger: #B32121;
    --gutter: 1rem;
    --radius: 0.75rem;
    --touch: 2.75rem;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #F3ECDC;
        --muted: #BDB3A3;
        --link: #F7D774;
        --line: #3D372E;
        --surface: #2E2A24;
        --background: #1F1C18;
    }
}

:root[data-theme="dark"] {
    --ink: #F3ECDC;
    --muted: #BDB3A3;
    --link: #F7D774;
    --line: #3D372E;
    --surface: #2E2A24;
    --background: #1F1C18;
}

@media (min-width: 640px) {
    :root {
        --gutter: 1.5rem;
    }
}

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

html, body {
    margin: 0;
}

body {
    background: var(--background);
    color: var(--ink);
    font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3 {
    color: var(--ink);
    line-height: 1.15;
}

h1 {
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 800;
    margin: 0.5rem 0 1rem;
}

    /* A soft yellow underline marks the main heading, the way the logo's coins carry the colour. */
    h1::after {
        content: "";
        display: block;
        width: 3.5rem;
        height: 0.4rem;
        margin-top: 0.6rem;
        border-radius: 1rem;
        background: var(--brand);
    }

h1:focus {
    outline: none;
}

a {
    color: var(--link);
}

.lead {
    color: var(--muted);
    font-size: 1.125rem;
    max-width: 40rem;
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: var(--danger);
    color: #ffffff;
    padding: 1rem;
}

    .blazor-error-boundary::after {
        content: "Noe gikk galt.";
    }