/* Copied unchanged from premicy repo src/styles/tokens.css at commit 65bb81e (2026-10-21, PREM-210 values).
   Update by copying the file again; style.css reads only the roles. */
/*
 * Premicy design tokens (PREM-53), bound to the 2026 brand (PREM-200, Direction C "Saisonkalender
 * and Quiet Alpine Luxury"): colour pairs of docs/design-system/brand/tokens.css and of the
 * target prototype_v4.html, fonts of brand/04_TYPOGRAPHY_AND_NUMERALS.md. Components read roles
 * (--color-action), never raw hex. Names from PREM-53 stay; values change, names are added.
 *
 * Themes: every colour is light-dark(<light>, <dark>). The browser picks the side from
 * `color-scheme`, which base.css sets from [data-theme] or the system preference.
 * Contrast: scripts/check_contrast.py reads the @contrast lines below and checks each pair in
 * both themes (role body = 4.5:1, large and ui = 3:1, WCAG 2.2 AA).
 *
 * @contrast body: --color-text on --color-bg | body text on page
 * @contrast body: --color-text on --color-surface | body text on card
 * @contrast body: --color-text on --color-surface-sunken | text on sunken panel
 * @contrast body: --color-text-muted on --color-bg | secondary text on page
 * @contrast body: --color-text-muted on --color-surface | secondary text on card
 * @contrast body: --color-text-muted on --color-surface-sunken | secondary text on sunken panel
 * @contrast body: --color-link on --color-bg | link on page
 * @contrast body: --color-link on --color-surface | link on card
 * @contrast body: --color-on-action on --color-action | primary button label
 * @contrast body: --color-on-action on --color-action-hover | primary button label, hover
 * @contrast body: --color-action-quiet-text on --color-action-quiet | secondary button label
 * @contrast body: --color-on-danger on --color-danger | destructive button label
 * @contrast ui: --color-border-strong on --color-surface | input border on card
 * @contrast ui: --color-border-strong on --color-bg | input border on page
 * @contrast ui: --color-focus on --color-bg | focus ring on page
 * @contrast ui: --color-focus on --color-surface | focus ring on card
 * @contrast ui: --color-action on --color-surface | selected control on card
 * @contrast body: --color-assure on --color-assure-bg | confirmed or verified badge
 * @contrast body: --color-assure on --color-surface | verified mark on card
 * @contrast body: --color-pending on --color-pending-bg | waiting state badge
 * @contrast body: --color-danger on --color-danger-bg | declined or error badge
 * @contrast body: --color-danger on --color-surface | field error text
 * @contrast body: --color-info on --color-info-bg | information badge
 * @contrast body: --color-neutral on --color-neutral-bg | draft or ended badge
 * @contrast body: --color-demo-text on --color-demo-bg | Demo banner text
 * @contrast body: --color-text on --color-avail-limited | calendar day, few places left
 * @contrast body: --color-text on --color-avail-open | calendar day, open
 * @contrast body: --color-text-muted on --color-avail-blocked | calendar day, not available
 * @contrast ui: --color-skeleton-hi on --color-surface | skeleton block on card
 * @contrast body: --color-text on --color-surface-raised | body text on raised card
 * @contrast body: --color-text-muted on --color-surface-raised | secondary text on raised card
 * @contrast ui: --color-border-strong on --color-field | input border on field
 * @contrast ui: --color-border-strong on --color-surface-sunken | input border on sunken panel
 * @contrast ui: --color-border-strong on --color-surface-raised | input border on raised card
 * @contrast body: --color-text on --color-field | text typed in a field
 * @contrast body: --color-assure on --color-surface-raised | verified mark on raised card
 * @contrast body: --color-sage on --color-bg | sage emphasis on page
 * @contrast body: --color-sage on --color-surface | sage emphasis on card
 * @contrast body: --color-on-gold on --color-gold | label on a gold quality shield
 *
 * Dark islands (PREM-210): Chromium resolves light-dark() where the custom property is declared, so
 * a subtree that sets only color-scheme still inherits the page side. The tokens are therefore also
 * declared on [data-scheme="dark"] (base.css gives it color-scheme dark): the footer and the
 * light-on-dark logo re-resolve every role to its dark side in either theme.
 */

:root,
[data-scheme="dark"] {
  /* Colour: base (light, dark). Warm canvas and mineral sand by day, obsidian slate by night. */
  --color-bg: light-dark(#fbfbf9, #111315);
  --color-surface: light-dark(#f4f1ea, #191d20);
  --color-surface-sunken: light-dark(#ebe6dc, #141719);
  --color-surface-raised: light-dark(#ffffff, #22262b);
  --color-text: light-dark(#111315, #fbfbf9);
  --color-text-muted: light-dark(#556057, #9eaba2);
  --color-border: light-dark(#d8d2c5, #2e343a);
  --color-border-strong: light-dark(#7a847c, #69756d); /* brand 8A948C and 4F5851 give 2.78:1 and 2.30:1 on surface; WCAG 1.4.11 needs 3:1 on every ground, sunken included */
  --color-overlay: light-dark(rgb(17 19 21 / 0.5), rgb(0 0 0 / 0.65));
  --color-field: light-dark(#ffffff, #141719);

  /* Colour: action (Tanne by day, Champagne by night) */
  --color-action: light-dark(#1c3326, #e8d8c4);
  --color-action-hover: light-dark(#2f4e3c, #ffffff);
  --color-on-action: light-dark(#fbfbf9, #111315);
  --color-action-quiet: light-dark(#e3ede5, #22262b);
  --color-action-quiet-text: light-dark(#1c3326, #e8d8c4);
  --color-link: light-dark(#1c3326, #e8d8c4);
  --color-focus: light-dark(#1c3326, #e8d8c4);

  /* Colour: assurance (confirmed, paid, verified only; R4 principle 7) */
  --color-assure: light-dark(#1c3326, #e8d8c4);
  --color-assure-bg: light-dark(#e3ede5, #1a241e);

  /* Colour: brand accents. Gold and champagne are metals (shields, foil, fills): never body
     text on a light ground. --color-sage is the text-safe accent: Heritage Sage by day,
     Champagne by night (the emphasis rule of brand/tokens.css). */
  --color-gold: light-dark(#c5a880, #c5a880);
  --color-on-gold: light-dark(#111315, #111315);
  --color-champagne: light-dark(#e8d8c4, #e8d8c4);
  --color-sage: light-dark(#3f4e44, #e8d8c4);
  --color-slate: light-dark(#2a2e33, #2a2e33);
  --color-tanne: light-dark(#1c3326, #1c3326);
  --color-season-autumn: light-dark(#6e3b63, #6e3b63);

  /* Colour: states */
  --color-pending: light-dark(#7a4300, #f2c46b);
  --color-pending-bg: light-dark(#f8ecd3, #352812);
  --color-danger: light-dark(#a8231a, #ffa69d);
  --color-danger-bg: light-dark(#f8e5e2, #3b1714);
  --color-on-danger: light-dark(#ffffff, #2a0d0a);
  --color-info: light-dark(#1d5690, #9cc9f2);
  --color-info-bg: light-dark(#e1ebf3, #13283b);
  --color-neutral: light-dark(#4a584e, #b5c0b8);
  --color-neutral-bg: light-dark(#ebe6dc, #22262b);

  /* Colour: availability (always paired with a pattern and a text label) */
  --color-avail-open: light-dark(#ffffff, #191d20);
  --color-avail-limited: light-dark(#f8ecd3, #352812);
  --color-avail-blocked: light-dark(#ebe6dc, #141719);

  /* Colour: Demo frame (calm, never alarming) */
  --color-demo-bg: light-dark(#f4ead0, #2e2913);
  --color-demo-text: light-dark(#463800, #f0e2a9);
  --color-demo-stripe: light-dark(#e9dbb4, #3a3418);

  --color-skeleton: light-dark(#e4dfd3, #2a2f34);
  --color-skeleton-hi: light-dark(#7e887f, #6c7673);

  /* Type, mapped to the roles of prototype_v4.html (PREM-210): display headlines in Cormorant
     Garamond (upright and italic), the editorial serif (leads, dish lines) in Source Serif 4, body
     and UI in Plus Jakarta Sans. Each family stands behind the other in its stack. The loader
     (next/font/local, self-hosted woff2, no third-party request) sets --font-cormorant,
     --font-source-serif, --font-plus-jakarta and --font-archivo; until it does, the quoted family
     names apply when installed, then the system fallbacks. */
  --font-display: var(--font-cormorant, "Cormorant Garamond"), var(--font-source-serif, "Source Serif 4"), Georgia,
    "Times New Roman", serif;
  --font-serif: var(--font-source-serif, "Source Serif 4"), var(--font-cormorant, "Cormorant Garamond"), Georgia,
    "Times New Roman", serif;
  --font-sans: var(--font-plus-jakarta, "Plus Jakarta Sans"), var(--font-archivo, "Archivo"), ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The wordmark "Premicy" (brand/02: Archivo SemiBold, sentence case, tracking -0.015em). */
  --font-wordmark: var(--font-archivo, "Archivo"), var(--font-plus-jakarta, "Plus Jakarta Sans"), ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-numeric-features: "tnum" 1, "lnum" 1;

  /* Type scale (Bringhurst's classic sequence, in rem of 16 px) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --measure: 68ch;

  /* Space (4 px base) */
  --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;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius: the prototype_v4.html values (PREM-210): controls and cards 4 px, overlays 8 px */
  --radius-control: 4px;
  --radius-card: 4px;
  --radius-overlay: 8px;
  --radius-pill: 999px;

  /* Elevation: only things that float over the page get a shadow */
  --shadow-overlay: 0 1px 2px rgb(16 24 22 / 0.12), 0 12px 32px -8px rgb(16 24 22 / 0.28);
  --shadow-sm: 0 1px 3px rgb(17 19 21 / 0.05);
  --shadow-md: 0 4px 16px -2px rgb(17 19 21 / 0.08);
  --shadow-lg: 0 12px 32px -4px rgb(17 19 21 / 0.12);
  --shadow-sticky: 0 4px 20px rgb(17 19 21 / 0.06);
  --shadow-toast: 0 1px 2px rgb(16 24 22 / 0.14), 0 8px 20px -6px rgb(16 24 22 / 0.3);

  /* Size */
  --target-min: 44px;
  --control-height: 44px;
  --control-height-sm: 36px;
  --container-max: 80rem; /* prototype_v4 .container: 1280 px including its 16 px padding */
  --header-height: 72px; /* prototype_v4 .site-header__inner */

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --z-header: 30;
  --z-drawer: 40;
  --z-toast: 60;
}

/* Phones, tablets and touch screens: every small control still gives a 44 px target. */
@media (max-width: 63.99rem), (pointer: coarse) {
  :root {
    --control-height-sm: var(--target-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}