/* Kläppa Hills Brewery — shared design tokens.
 *
 * The badge is a screenprint, and this is the same print pulled on dark
 * stock instead of cream: the paper went to near-black bark, the ink went
 * to cream, and the mountain's moss gold stayed the accent. The metaphor
 * behind the token names survives the switch — --paper is still whatever
 * you print ON, --ink is still what you print WITH — so page stylesheets
 * needed no renaming when the light palette (see git history, commit
 * efd4564) was replaced by this one.
 *
 * Nothing in the app should introduce a colour outside this file — page
 * stylesheets reference the custom properties so a palette change is one
 * edit here.
 *
 * Loaded before each page's own stylesheet:
 *   <link rel="stylesheet" href="assets/theme.css">
 *   <link rel="stylesheet" href="assets/view.css">
 * (Two <link>s rather than an @import so the browser fetches them in
 * parallel; the CSP's style-src is 'self', which both satisfy.)
 *
 * Contrast ratios in the comments are measured against the surface named
 * beside them; every text pair clears AA, every border clears the 3:1
 * non-text threshold.
 */

:root {
    /* Surfaces — dark stock, warmed towards the badge's forest green so it
       reads as bark rather than as a neutral grey UI. ------------------- */
    --paper: #1B2318;        /* the stock this print is pulled on */
    --paper-lift: #232E1F;   /* cards sitting on it */
    --paper-sink: #141A12;   /* wells, tracks, table stripes */
    --ink: #ECE4CE;          /* cream ink — 12.7:1 on --paper */
    --ink-deep: #12170F;     /* deepest surface: page floor, pressed states */

    /* Text ------------------------------------------------------------- */
    --ink-soft: #A3AC94;     /* secondary text — 6.8:1 */

    /* Accents. On dark stock the light variants do the work, so --moss and
       --moss-lift now differ by role, not by surface: --moss is the accent
       you set text in, --moss-lift the brighter fill you put dark text on
       (chips, badges, bars). ------------------------------------------- */
    --moss: #BDB273;         /* the mountain's gold — 7.5:1 */
    --moss-lift: #D5CB8E;    /* gold fill; --ink-deep text on it is 11.1:1 */
    --pine: #93BC7C;         /* positive/complete — 7.5:1 */
    --pine-lift: #ADD198;    /* positive fill */
    --rust: #E0906A;         /* destructive/error — 6.4:1 */
    --rust-lift: #EFAE8C;    /* destructive fill */

    /* Hairlines and borders. Cream borders everywhere would shout on this
       stock, so structure is drawn in a muted green — 3.8:1 on --paper. */
    --line: #6B8062;
    --ridge: #2E3B28;        /* the mountain band's body — a dusk silhouette,
                                deliberately close to --paper so the moss
                                faces carry the shape, not the mass */

    /* Fullness ramp, full → empty. On cream this ran dark-to-light; on dark
       stock that would make a full keg invisible, so it now runs as a gauge
       instead: green plenty, gold half, rust low, muted line for empty. */
    --fill-full: #9CC286;
    --fill-three-quarters: #BDB273;
    --fill-half: #D2A863;
    --fill-quarter: #D08258;
    --fill-empty: #6B8062;

    /* Type -------------------------------------------------------------
       No webfonts: the CSP is default-src 'self' and the app is deployed
       over plain FTP, so a font CDN is out and shipping binaries isn't
       worth it. The badge's voice is carried by weight, caps and tracking
       instead of by a licensed face. */
    --font-display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Geometry — the badge is a printed sticker, not a glass panel: tight
       radii, real borders, no glow. */
    --radius: 4px;
    --radius-lg: 8px;
    --border: 2px solid var(--line);
    --hatch-offset: 6px;
}

/* Display type: heavy caps with the wordmark's tracking. Used for page
   titles and section heads only — it loses its punch if everything shouts. */
.display,
.display-lg {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--ink);
}

.display-lg {
    font-size: clamp(2rem, 6vw, 3.25rem);
    letter-spacing: 0.01em;
}

/* Eyebrow/label type: the "BREWERY" line under the wordmark. */
.eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--moss);
}

/* Numbers are instrument readings — gravity, ABV, IBU, vote counts, dates.
   Tabular figures so columns of them line up. */
.data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* SIGNATURE: the badge's drop shadow is not a blur, it's a block of 45°
   hatching offset down-right of the letterforms. Cards, buttons and section
   heads reuse that exact device, which is what keeps the app looking like
   the label rather than like a generic cream template.
   The element needs its own stacking context and a background, or the
   hatching shows through it. */
.hatch {
    position: relative;
    background-color: var(--paper-lift);
}

.hatch::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--hatch-offset) calc(-1 * var(--hatch-offset)) calc(-1 * var(--hatch-offset)) var(--hatch-offset);
    background-image: repeating-linear-gradient(
        45deg,
        var(--line) 0,
        var(--line) 1.5px,
        transparent 1.5px,
        transparent 5px
    );
    border-radius: var(--radius);
    pointer-events: none;
}

/* A hatched rule under a section head — same texture, one dimension. */
.hatch-rule {
    height: 6px;
    border: 0;
    background-image: repeating-linear-gradient(
        45deg,
        var(--line) 0,
        var(--line) 1.5px,
        transparent 1.5px,
        transparent 5px
    );
}

/* The mountain band, drawn as a simplified two-peak silhouette in
   partials/brandmark.php. It sits flush under the header the way it sits
   under the wordmark on the badge. */
.mountain-band {
    display: block;
    width: 100%;
    height: auto;
    max-height: 120px;
}

.mountain-body { fill: var(--ridge); }
.mountain-face { fill: var(--moss); }

/* Keyboard focus has to be visible against both surfaces. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--moss);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Brandmark ------------------------------------------------------------
   The arched wordmark from partials/brandmark.php. SVG text can't inherit
   a class from the parent page, so the letterform styling lives here. */
.brandmark {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

.brandmark-upper { font-size: 88px; }
.brandmark-lower { font-size: 76px; }

.brandmark-upper,
.brandmark-lower {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 2px;
}

.brandmark-solid { fill: var(--ink); }
.brandmark-hatch-line { stroke: var(--ink); }

/* .brandmark-shadow deliberately sets no fill: the hatch pattern is
   per-instance (ids are uniquified in brandmark_wordmark()), so the fill
   comes from the element's own fill="url(#bmN-hatch)" attribute. A fill
   here would win over that attribute — CSS beats presentation attributes —
   and point every instance at an id that may not exist. */

.brandmark-eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 4px;
    fill: var(--ink);
}