/* ============================================================================
   Archetypal — branding: default.css  (the canonical brand skin)
   See docs/DESIGN.md §2. This file is the SINGLE SOURCE OF TRUTH for brand
   *values*: nothing but @font-face blocks and `:root { --token: value }`.

   WHY public/ (served at a stable /branding/default.css)?
   ─────────────────────────────────────────────────────────
   The `?branding=` switcher swaps this stylesheet AT RUNTIME by URL (see
   src/utils/branding.ts + the pre-paint script in Base.astro). That requires a
   *stable, unhashed, plain* URL the client can rewrite to `/branding/<name>.css`.
   Files under src/styles would be bundled + content-hashed by Vite (unstable
   name), so they can't be addressed by a literal runtime path. public/ ships
   verbatim to that exact URL — the simple, correct home for a runtime-swappable
   skin. A brand VARIANT is just another file here (e.g. /branding/inkline.css)
   overriding any subset of these tokens; variants never touch markup/utilities.

   RULE: a variant may only override tokens. If a design idea can't be a token
   value, it first becomes a token here, then varies. Token names describe ROLE,
   not value (--orn-color, never --gold).

   Contrast (WCAG AA) audited pairs for this skin:
     --ink  #3a3a3a on --paper #f6f5f1  = 10.4:1
     --muted #575760 on --paper #f6f5f1 =  6.55:1 (clears AA for small-caps meta)
     --accent #1e73be on --paper        =  4.53:1 (interaction color only)
   ============================================================================ */

/* ---- Self-hosted Linden Hill (headings). Matches archetypal.cz's genpress-child theme. ---- */
@font-face {
  font-family: 'Linden Hill';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lindenhill.woff2') format('woff2'),
       url('/fonts/lindenhill.woff') format('woff');
}
@font-face {
  font-family: 'Linden Hill';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lindenhill-italic.woff2') format('woff2'),
       url('/fonts/lindenhill-italic.woff') format('woff');
}

/* ---- Self-hosted Literata (article prose — web-polish W1/P4). Variable weight axis (200–900),
   latin + latin-ext subsets (Czech diacritics live in latin-ext), from @fontsource-variable/literata
   5.3.0. SIL OFL 1.1 — /fonts/OFL.txt. ---- */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-latin-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: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-latin-ext-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: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-latin-italic.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: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-latin-ext-italic.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;
}

:root {
  /* ── core palette (names unchanged from archetypal.cz / GeneratePress) ── */
  --max: 760px;                /* prose / article column */
  --wide: 1140px;              /* homepage + listing band width (GP contained container) */
  --page-bg: var(--paper);     /* PHASE 2: paper ground (was flat #efefef) */
  --surface: #ffffff;          /* article/card surface (--base-3) — stays white */
  --ink: #3a3a3a;              /* body text color (10.4:1 on paper) */
  --heading: #222222;          /* --contrast */
  --muted: #575760;            /* --contrast-2 (small-caps meta: 6.55:1 on paper — AA) */
  --rule: #dcdad2;             /* PHASE 2: warm hairline (was cool #e7e7e7) */
  --link: #424242;             /* GP link color */
  --link-visited: #666666;     /* read → neutral black-and-white (no colour); 4.9:1 on paper, AA */
  --link-hover: #222222;       /* --contrast */
  --accent: #1e73be;           /* GP --accent (blue) */
  --accent-soft: #f3f7fb;      /* light-blue feature band bg (HPMOR, member lock) */
  --accent-edge: #d6e4f2;      /* light-blue feature band border */
  --chrome: #cfcfcf;           /* light gray on dark chrome; card hover border */
  --nav-bg: rgba(10, 10, 10, 0.94);
  --nav-fg: #efefef;
  --menu-bg: #0a0a0a;          /* dropdown menu bg */
  --menu-hover: #4f4f4f;       /* dropdown item hover bg */
  --footer-bg: #222222;
  --heading-font: 'Linden Hill', Georgia, 'Times New Roman', serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Long-form reading text only (article .body/.intro — DESIGN §3.1); UI stays on --body-font. */
  --prose-font: 'Literata', Charter, Georgia, serif;

  /* ── new: paper & ink (B&W core) — DESIGN §2.2 ─────────────────────────── */
  --paper: #f6f5f1;            /* warm-neutral paper; replaces flat #efefef */
  --paper-deep: #edece6;       /* bands that must recede (phase 4 owns usage) */
  --ink-strong: #141414;       /* display ink: h1, drop caps, ornaments (phase ≥3) */

  /* ── new: ornament — DESIGN §2.2 (consumed in phase 4) ─────────────────── */
  --orn-color: var(--ink-strong);
  --orn-rule-w: 1px;           /* hairline weight */
  --orn-double-gap: 3px;       /* double-rule spacing */
  --orn-fleuron: "\2766";      /* section divider glyph ❦ */

  /* ── new: imagery — DESIGN §2.2 ────────────────────────────────────────── */
  /* Default hero plate: the 2026-07-13 labyrinth (pilgrim on the crag, layout revealed).
     No-JS/SSR fallback — with JS, the Base.astro pre-paint script re-rolls the default brand's
     hero at random per session among engraving-06/07/08 (labyrint/majak/drak) from the
     registry src/utils/hero-plates.ts. A/B arms are exempt from the roll.
     Three widths (w3 B2): -s <= 640px viewport, base, -l >= 1800px; each an image-set() of
     AVIF -> WebP -> the .jpg master (variants from scripts/hero-variants.ts).
     --hero-pos = the plate's focal point, kept in view by the narrow mobile crop (w3 B1);
     it belongs to the image, so it is paired with it here (labyrint: figure at ~68 %). */
  /* Plain .jpg master: the fallback for browsers without image-set() type() (Safari <= 16,
     Chrome < 113) - there a var() holding the image-set is invalid at computed time and the
     plate would render with background-image:none. .hero-plate uses the image-set tokens only
     under @supports (index.astro, review M1). */
  --hero-jpg: url('/images/hero/engraving-06-labyrint.jpg');
  --hero-image-s: image-set(url('/images/hero/engraving-06-labyrint-800.avif') type('image/avif'), url('/images/hero/engraving-06-labyrint-800.webp') type('image/webp'), url('/images/hero/engraving-06-labyrint.jpg') type('image/jpeg'));
  --hero-image: image-set(url('/images/hero/engraving-06-labyrint-1600.avif') type('image/avif'), url('/images/hero/engraving-06-labyrint-1600.webp') type('image/webp'), url('/images/hero/engraving-06-labyrint.jpg') type('image/jpeg'));
  --hero-image-l: image-set(url('/images/hero/engraving-06-labyrint-2560.avif') type('image/avif'), url('/images/hero/engraving-06-labyrint-2560.webp') type('image/webp'), url('/images/hero/engraving-06-labyrint.jpg') type('image/jpeg'));
  --hero-pos: 68% 50%;
  --hero-height: clamp(320px, 42vh, 520px);
  --hero-height-m: 260px;      /* plate height below 640px - a band, not a wall (w3 B1) */
  /* Thumbnails + article figure in full, slightly richer colour (2026-10-09, Kerray: „mnohem
     sytější, teď je to všechno moc černobílé“ - replaces the grayscale(1) treatment). */
  --thumb-filter: saturate(1.2) contrast(1.04);
  --thumb-filter-hover: saturate(1.35) contrast(1.06);

  /* ── flair: barevný vánek (color breeze) — approved 2026-07-03 ─────────── */
  /* Every --breeze-period a brief breath of color travels through the
     grayscale post grids, card to card (--breeze-stagger apart), like wind
     through grass. Keyframes + rules live in Base.astro; variants disable
     with `--breeze-name: none` or retune period/stagger — calm vs breezy
     is A/B-testable like any other skin. */
  --breeze-name: none;         /* off since 2026-10-09 - thumbs are in colour, nothing to breathe into */
  --breeze-period: 20s;        /* unread cards pulse a touch more often (was 26s) */
  --breeze-stagger: .55s;
  --breeze-delay: 12s;         /* first breath only after the reader has settled in (w3 B6) */

  /* ── flair: bublina (living accent) — the accent hue drifts like the film
     of a soap bubble: quick bloom, slow ebb, a sudden fluid jerk, long settle.
     Implemented in Base.astro via a registered --accent-hue; browsers with
     oklch get the living color, others keep the static --accent above.
     AA verified across the FULL hue wheel at L 50% / C 0.125 (worst 4.88:1
     on paper). Variants freeze it with --accent-anim: none or retune. */
  --accent-anim: accent-drift;
  --accent-period: 85s;
  --accent-base-hue: 245deg;   /* oklch hue of the brand blue #1e73be */
  --accent-l: 50%;
  --accent-c: 0.125;
  /* Deeper cut of the living accent for section headings (a shade darker than the
     link accent — DESIGN §3.2). Static fallback here (7:1 on paper); the oklch
     @supports block in Base.astro makes it drift with --accent-hue. */
  --accent-strong: #1a5a94;

  /* ── flair: čelní sklo (windshield frit) — the SCREEN-corner frit clusters (black discs, faint
     living-accent glow). Markup + styles live in the CornerFlourish addon.
     OFF in the default skin since 2026-10-08 (art direction §1: fixed ornament decorates the
     browser window, not the page). 0 = the corner layers are not rendered at all. Opt back in per
     skin or via FlairPanel ?flair=kulicky. (Card corners + psych wash were removed.) */
  --flair-corner-opacity: 0;

  /* ── shape grammar — DESIGN §5.5 (art direction P2) ────────────────────── */
  --radius: 2px;               /* cards, buttons, fields, tags */
  --radius-plate: 0;           /* image plates (circles 50% only for dots/avatars) */
  /* One card = one white leaf with one shadow (art direction P4). */
  --card-shadow: 0 1px 2px rgba(20,20,20,.10), 0 4px 14px rgba(20,20,20,.06);
  --card-shadow-hover: 0 1px 3px rgba(20,20,20,.14), 0 8px 20px rgba(20,20,20,.09);

  /* ── buttons — DESIGN §5.5 (art direction P6, web-polish-w3 A2): three roles, one shape.
     Minimum hit target (WCAG 2.5.8 comfortable / Apple HIG on phones) and the gap inside a
     button group. Consumed by the cta-ink / btn-format shortcuts (uno.config.ts). */
  --btn-min-h: 40px;
  --btn-min-h-touch: 44px;
  --btn-gap: .5rem;

  /* ── flair: archetypální moře (the archetypal sea) — DESIGN §5.1 item 7 ── */
  /* The homepage bands float as paper plates on a deeper ground — the sea —
     visible only in the --sea-gap air between bands. Three huge soft radial
     tints (the living-accent hue family at whisper chroma, near-paper
     lightness) drift on compositor-only transforms over --sea-period: too
     slow to watch, never still. Layer markup + keyframes live in
     src/pages/index.astro. Variants calm or drain the sea by overriding
     these (e.g. --sea-opacity: 0 → bands sit back on plain --page-bg).
     Non-oklch browsers drop the tint gradients and keep the plain ground. */
  --sea-opacity: 1;
  --sea-ground: #e9e7dd;                   /* the water: a step deeper than --paper-deep */
  --sea-tint-1: oklch(95% 0.024 245deg);   /* brand-blue wash */
  --sea-tint-2: oklch(95.5% 0.02 170deg);  /* sea-green wash */
  --sea-tint-3: oklch(96% 0.018 315deg);   /* violet wash */
  --sea-period: 210s;                      /* one slow swell (transforms only — cheap) */
  --sea-gap: clamp(3.5rem, 9vh, 6.5rem);   /* open water between floating bands */

  /* ── new: type scale (~1.32 ratio) & rhythm — DESIGN §2.2 / §3.2 ───────── */
  --step--1: .89rem;
  --step-0: 17px;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 2.8rem;
  --space-band: clamp(3rem, 8vh, 5.5rem);     /* vertical air between bands */
}