/* tokens.css - company-in-liechtenstein.com (Vaduz Corporate Solutions). The source of truth for styling (DESIGN.md section 1).
 * Three layers: primitive (--p-*: raw values, measured on the owner's design variant A and re-coloured to the owner's alpine
 * forest green) -> semantic (--c-*, --f-*, --s-*: what a value means on this site) -> component (--btn-*, --field-*,
 * --card-*: what a component reads). Components read only the semantic and component layers.
 * Colours are hex (the harvester and scripts/image-prompts.py read hex); the oklch value of each is in its comment.
 * Contrast checked 2026-11-05: ink on white 16.67, on beige 15.18; body text on white 12.83, on beige 11.68; muted on
 * white 5.90, on beige 5.37, on mint 5.16; white on the green button 6.43, on the hover 8.14, on forest 9.63; green as
 * text on white 6.43, on beige 5.86; on-forest muted 7.00; sage on forest 6.32.
 * Forest (chroma 0.061) is the only large fill and stays under the 0.07 saturation line; the button green (chroma 0.089)
 * is a detail colour: buttons, links, the focus ring, the check marks. No gold, no navy (rows 16 and 17 of the registry).
 */
:root {
  /* ---------- primitive: colour ---------- */
  --p-ink: #17201c;        /* oklch(23.3% 0.015 166) headings */
  --p-text: #2b3430;       /* oklch(31.5% 0.014 167) running text */
  --p-grey: #5b6762;       /* oklch(50.2% 0.017 169) secondary text */
  --p-forest: #1f4d3a;     /* oklch(38.2% 0.061 164) brand, bands, the logo tile */
  --p-forest-deep: #14352a;/* oklch(30.0% 0.044 169) the band's deep end, table heads */
  --p-green: #1d6b4e;      /* oklch(47.3% 0.089 164) buttons, links */
  --p-green-dark: #185a42; /* oklch(42.0% 0.077 165) button hover */
  --p-sage: #b9d9c4;       /* oklch(85.6% 0.045 157) the logo line, rails on forest */
  --p-sage-light: #cfe0d5; /* oklch(89.1% 0.023 158) muted text on forest */
  --p-mint: #e9f2ec;       /* oklch(95.3% 0.012 157) chips, the check disc, the active row */
  --p-beige: #f8f4ea;      /* oklch(96.8% 0.014 89) cards, alternate sections, the form panel */
  --p-beige-2: #efe8d8;    /* oklch(93.2% 0.023 87) the hero caption tab, table stripes */
  --p-border: #d9d4c7;     /* oklch(87.0% 0.018 89) field borders */
  --p-line: #e8e3d7;       /* oklch(91.6% 0.017 88) hairlines */
  --p-white: #ffffff;
  --p-error: #a3261b;      /* oklch(46% 0.15 30) form errors only */

  /* ---------- semantic: colour ---------- */
  --c-bg: var(--p-white);
  --c-surface: var(--p-beige);            /* the alternate ground and the card fill (variant A: beige cards, no border) */
  --c-card: var(--p-beige);
  --c-brand: var(--p-forest);
  --c-text-strong: var(--p-ink);
  --c-text: var(--p-text);
  --c-muted: var(--p-grey);
  --c-link: var(--p-green);
  --c-accent: var(--p-green);             /* the primary call to action: a green fill, white label */
  --c-accent-hover: var(--p-green-dark);
  --c-on-accent: var(--p-white);
  --c-accent-ink: var(--p-green);         /* green as text: kickers, numerals, icons */
  --c-soft: var(--p-mint);                /* chips, the check disc, actor tags */
  --c-soft-hover: var(--p-sage);          /* rails and connectors of the infographics */
  --c-mist: var(--p-beige-2);
  --c-band-from: var(--p-forest);         /* the CTA band */
  --c-band-to: var(--p-forest-deep);
  --c-panel: var(--p-forest);
  --c-on-band: var(--p-white);
  --c-on-band-muted: var(--p-sage-light);
  --c-sage: var(--p-sage);
  --c-line: var(--p-line);
  --c-line-strong: var(--p-border);
  --c-line-dark: rgba(255, 255, 255, 0.18);
  --c-focus: var(--p-green);
  --c-check: var(--p-green);
  --c-error: var(--p-error);
  --c-footer-bg: var(--p-white);
  --c-footer-text: var(--p-grey);

  /* ---------- semantic: type (one geometric sans for everything, Outfit; headings 500-600, never light) ---------- */
  --f-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-text: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-head: 500;
  --fw-strong: 600;
  --fs-h1: 3.125rem;     /* 50px (variant A 49), line 58 */
  --lh-h1: 1.16;
  --fs-h1-m: 2.125rem;   /* 34px on a phone (variant A 34) */
  --fs-h2: 2.25rem;      /* 36px, line 44 */
  --lh-h2: 1.22;
  --fs-h2-m: 1.75rem;
  --fs-h3: 1.375rem;     /* 22px */
  --lh-h3: 1.32;
  --fs-h3-m: 1.25rem;
  --fs-ui: 1.1875rem;    /* 19px: card titles, FAQ questions */
  --fs-text: 1.0625rem;  /* 17px, line 28 */
  --lh-text: 1.65;
  --fs-lede: 1.25rem;    /* 20px hero lede */
  --fs-small: 0.9375rem; /* 15px */
  --fs-micro: 0.8125rem; /* 13px */
  --fs-label: 0.875rem;  /* 14px kickers, sentence case (never uppercase: variant A sets none) */
  --ls-label: 0.01em;

  /* ---------- semantic: space and layout ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 28px;
  --s-6: 44px;
  --s-7: 72px;
  --s-8: 104px;
  --container: 1240px;
  --container-text: 760px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 8vw, 104px);
  --section-y-m: 56px;

  /* ---------- semantic: shape and depth (variant A: radius 7.5-9.4, flat cards, no shadow) ---------- */
  --r-field: 8px;
  --r-btn: 8px;
  --r-card: 8px;
  --r-panel: 12px;
  --r-photo: 12px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(23, 32, 28, 0.06);
  --shadow-lift: 0 16px 36px rgba(23, 32, 28, 0.14);

  /* ---------- semantic: motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-colour: 0.2s;

  /* ---------- component ---------- */
  --btn-h: 48px;
  --btn-pad: 12px 26px;
  --btn-fs: 1rem;
  --field-h: 46px;
  --field-bg: var(--p-white);
  --field-pad: 10px 14px;
  --card-bg: var(--c-card);
  --card-pad: 30px 28px;
  --header-nav-h: 96px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-colour: 0s; }
}