/* ===========================================================================
   Hatchure — the brand's design tokens, for every page on hatchure.app
   ---------------------------------------------------------------------------
   One copy of the colours and type the map (css/styles.css), the homepage
   (welcome.html, welcome-de.html) and the loop pages (css/loop-pages.css)
   share. Each of them links this file first and keeps only what is its own:
   the map its map colours and controls, the pages their widths and shadows.

   Dark, as the app has it: the media query when the visitor follows the
   system, the attribute when they chose (data-theme, stamped from the
   hatchure.theme setting before first paint). The values are the brand
   plan's (docs/branding/04-brand-plan-2026.html), but for the page, its
   lines and its soft text: the plan's Chalk family is mixed towards green,
   and on a page of text and cards with no photo over it that tint became
   the page's colour. Those are warm greys near neutral instead, the loop
   pages' since 12 Oct and the apps' palette's since (Palette.swift in
   hatchure-ios, Palette.kt in hatchure-android); Ink, the band, amber and
   the state colours are the plan's. Light --ink-soft is a shade darker
   than the loop pages first had it (#6B6F69), to clear 4.5:1 on
   --chalk-dim as well as on the page.

   Precached by the service worker with the app's own CSS (sw.js).
   =========================================================================== */

:root{
  --amber: #F0B33A;
  --amber-dark: #D89A1E;
  --amber-text: #8F5E05;
  --amber-tint: #FBF0D2;
  --band: #14201A;
  --blaze: var(--amber);
  --blaze-dark: var(--amber-dark);
  --blaze-text: var(--amber-text);
  --chalk: #F7F6F2;
  --chalk-dim: #ECEAE4;
  --closed: #B33A15;
  --closed-tint: #F9E9E3;
  --display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --ink: #14201A;
  --ink-2: #3C403D;
  --ink-soft: #676B65;
  --line: #E3E1DA;
  --line-on-ink: #34443B;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --moss: var(--open);
  --mustard: #D9A441;
  --on-amber: #14201A;
  --on-ink: #EDEFE8;
  --open: #22703F;
  --open-tint: #DFF0E4;
  --paper: var(--chalk);
  --paper-dim: var(--chalk-dim);
  --radius: 6px;
  --sepia: #7A5E43;
  --surface: #FFFFFF;
  --water: #22658A;
  --white: #FFFFFF;
  /* SAC trail grades, the Swiss sign colours (the multi-sport mockups):
     yellow T1, white-red-white T2–T3, white-blue-white T4–T6, T6 darker.
     The line style carries the pair (T3–T4 dashed, T5–T6 dotted); t0 is a
     path nobody graded. Only for grades — never for state. */
  --sac-t0: #9AA39B;
  --sac-t1: #C29410;
  --sac-t2: #C8402B;
  --sac-t3: #C8402B;
  --sac-t4: #2F63B0;
  --sac-t5: #2F63B0;
  --sac-t6: #1E2C6B;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --amber-text: #F0B33A;
    --amber-tint: #3A2E12;
    --band: #0F1813;
    --chalk: #1B1C1A;
    --chalk-dim: #131412;
    --closed: #F07A55;
    --closed-tint: #3A2119;
    --ink: #EDEFE8;
    --ink-2: #C9CCC5;
    --ink-soft: #A3A6A0;
    --line: #363834;
    --line-on-ink: #3A4A40;
    --open: #5FC48A;
    --open-tint: #1B3326;
    --sepia: #C9A57F;
    --surface: #242523;
    --water: #63B1D8;
    --white: #242523;
    --sac-t0: #5E6E63;
    --sac-t1: #E6C04A;
    --sac-t2: #F07A62;
    --sac-t3: #F07A62;
    --sac-t4: #7FA8EC;
    --sac-t5: #7FA8EC;
    --sac-t6: #C4BFF7;
  }
}
:root[data-theme="dark"]{
  --amber-text: #F0B33A;
  --amber-tint: #3A2E12;
  --band: #0F1813;
  --chalk: #1B1C1A;
  --chalk-dim: #131412;
  --closed: #F07A55;
  --closed-tint: #3A2119;
  --ink: #EDEFE8;
  --ink-2: #C9CCC5;
  --ink-soft: #A3A6A0;
  --line: #363834;
  --line-on-ink: #3A4A40;
  --open: #5FC48A;
  --open-tint: #1B3326;
  --sepia: #C9A57F;
  --surface: #242523;
  --water: #63B1D8;
  --white: #242523;
  --sac-t0: #5E6E63;
  --sac-t1: #E6C04A;
  --sac-t2: #F07A62;
  --sac-t3: #F07A62;
  --sac-t4: #7FA8EC;
  --sac-t5: #7FA8EC;
  --sac-t6: #C4BFF7;
}

/* ---- Glass: the iOS app's Liquid Glass, as a browser can draw it ----
   The rule is the app's (Design/Glass.swift): what floats over the map or
   a photo — the search pill, the chips, the legend, the round controls,
   the Plan button, toasts, the header bar — is glass; what you read — the
   sheets, the panels, the cards — stays opaque. A glass face is its own
   colour (the pill's Ink, the surface, amber) laid at a share over a blur
   of what is under it, with a lit hairline where iOS refracts,
   and the 1px --line hairline the app draws on every glass shape.

   Each face mixes its colour with transparent at its --glass-a-* share,
   blurs through --glass-blur, and its edge is a lit hairline
   (--glass-edge) rather than the white wash down its top an older iOS
   drew, so a face reads as glass without looking glossy. Solid is
   the default — every share 100%, no blur — and the glass only switches on
   where the browser can blur behind an element. It switches back off for
   anyone who asked for less transparency or more contrast, as the app
   falls back to a solid face under Reduce Transparency. */
:root{
  --glass-blur: none;
  --glass-edge: 0 0 0 transparent;
  --glass-lift: 0 3px 8px rgba(0,0,0,0.25);
  --glass-rim: var(--line);
  --glass-a-pill: 100%;
  --glass-a-surface: 100%;
  --glass-a-on: 100%;
  --glass-a-control: 100%;
  --glass-a-amber: 100%;
  --glass-a-band: 100%;
  --glass-a-header: 100%;
  /* The floating bar (css/site-header.css, the map's #headerTop in
     css/chrome.css): its rim, its shadow, and the faces of what sits in
     it — a button, one hovered, one chosen — as lighter shares of white
     over its Ink. */
  --bar-rim: color-mix(in srgb, var(--line-on-ink) 80%, transparent);
  --bar-lift: 0 3px 8px rgba(0,0,0,0.25);
  --bar-button: rgba(255,255,255,0.09);
  --bar-hover: rgba(255,255,255,0.07);
  --bar-selected: rgba(255,255,255,0.15);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  :root{
    --glass-blur: blur(16px) saturate(185%);
    --glass-edge: inset 0 0.5px 0 rgba(255,255,255,0.22), inset 0 0 0 0.5px rgba(255,255,255,0.06);
    --glass-lift: 0 8px 24px -10px rgba(0,0,0,0.35);
    --glass-rim: color-mix(in srgb, var(--line) 70%, transparent);
    --glass-a-pill: 58%;
    --glass-a-surface: 56%;
    --glass-a-on: 86%;
    --glass-a-control: 70%;
    --glass-a-amber: 82%;
    --glass-a-band: 66%;
    --bar-rim: rgba(255,255,255,0.10);
    --bar-lift: 0 14px 34px -16px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.12);
    /* A bar over a page rather than the map: over Chalk, the band at the
       map's share turns a muddy grey, so it keeps more of its dark. */
    --glass-a-header: 84%;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  :root{
    --glass-blur: none;
    --glass-edge: 0 0 0 transparent;
    --glass-lift: 0 3px 8px rgba(0,0,0,0.25);
    --glass-rim: var(--line);
    --glass-a-pill: 100%;
    --glass-a-surface: 100%;
    --glass-a-on: 100%;
    --glass-a-control: 100%;
    --glass-a-amber: 100%;
    --glass-a-band: 100%;
    --glass-a-header: 100%;
    --bar-rim: color-mix(in srgb, var(--line-on-ink) 80%, transparent);
    --bar-lift: 0 3px 8px rgba(0,0,0,0.25);
  }
}

/* A <picture>'s <source> never draws anything, but a picture that steps
   aside with display:contents (the loop cards, the homepage's previews)
   hands its children to the grid it sits in, and a grid blockifies every
   child it gets — so the dark drawing's <source> took the first column and
   pushed the map and the figures one cell along. Out of the layout, always. */
source{ display:none; }