/* tokens.css - foundation-liechtenstein.com (LFF Heritage Trusts). The source of truth for styling (DESIGN.md section 1).
 * Three layers: primitive (--p-*: raw values; the spacing and type scale measured on the owner's design variant A,
 * re-coloured to the owner's princely plum) -> 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-07: ink on ivory 15.94; body text on ivory 11.59, on stone 10.63; muted on ivory 5.85, on
 * stone 5.36, on lilac 5.12; ivory on the plum button 10.90, on its hover 13.15, on aubergine 15.13; plum as text on
 * ivory 10.90, on stone 10.00; rose copper on aubergine 7.04; muted text on aubergine 10.62; dark copper on ivory 4.85.
 * Aubergine (chroma 0.061) is the only large dark fill (CTA band, footer, header bar) and stays under the 0.07
 * saturation line; plum (chroma 0.094) is a detail colour: buttons, links, the focus ring, numerals, rules.
 * Rose copper is the secondary: rules, numerals and buttons on aubergine; dark copper for kickers and hairlines on ivory.
 * Changed from brass #c9a96a / #8a6a2c on 2026-11-07 at the registry check: near-copies of business-in-liechtenstein.com (#c9a96e / #8a6a34), rule 7.
 * No forest green, no gold on navy, no royal blue (registry rows 16-18, the Liechtenstein sisters).
 */
:root {
  /* ---------- primitive: colour ---------- */
  --p-ink: #221a26;         /* oklch(23.3% 0.025 314) headings */
  --p-text: #3a3240;        /* oklch(33.1% 0.027 311) running text */
  --p-grey: #675e6b;        /* oklch(49.5% 0.023 316) secondary text */
  --p-plum: #4f2a5c;        /* oklch(35.6% 0.094 317) the accent: buttons, links, rules, numerals */
  --p-plum-dark: #3e2049;   /* oklch(30.3% 0.080 316) button hover */
  --p-aubergine: #2e1937;   /* oklch(25.6% 0.061 315) CTA band, footer, header bar */
  --p-aubergine-2: #3b1f45; /* oklch(29.5% 0.075 317) the band's lighter end, table heads, the social card ground */
  --p-copper: #d4a184;      /* oklch(74.9% 0.073 51) the secondary: rules, numerals and buttons on aubergine */
  --p-copper-dark: #91583c; /* oklch(51.8% 0.086 46) copper as kicker text and hairline: 5.41 on ivory, 4.96 on stone (was #9a5f42, 4.45 on stone, 2026-11-07) */
  --p-lilac: #efe7f1;       /* oklch(93.7% 0.016 319) the check disc, the active row, soft buttons */
  --p-lilac-2: #dccbe2;     /* oklch(86.3% 0.036 317) infographic rails and connectors */
  --p-ivory: #fbf8f3;       /* oklch(98.0% 0.007 81) the page ground */
  --p-stone: #f3eee6;       /* oklch(95.1% 0.012 80) cards, alternate sections, the form sheet */
  --p-stone-2: #e8e0d3;     /* oklch(90.9% 0.020 80) table stripes, the caption plate */
  --p-border: #d8cfc2;      /* oklch(85.8% 0.020 77) field rules */
  --p-line: #e9e2d7;        /* oklch(91.5% 0.017 79) hairlines */
  --p-on-dark-muted: #d9cfdd; /* oklch(86.7% 0.022 316) secondary text on aubergine */
  --p-white: #ffffff;
  --p-error: #a3261b;       /* oklch(46% 0.15 30) form errors only */

  /* ---------- semantic: colour ---------- */
  --c-bg: var(--p-ivory);
  --c-surface: var(--p-stone);            /* the alternate ground and the card fill: filled cards, no border */
  --c-card: var(--p-stone);
  --c-brand: var(--p-plum);
  --c-text-strong: var(--p-ink);
  --c-text: var(--p-text);
  --c-muted: var(--p-grey);
  --c-link: var(--p-plum);
  --c-accent: var(--p-plum);              /* the primary call to action: a plum fill, ivory label */
  --c-accent-hover: var(--p-plum-dark);
  --c-on-accent: var(--p-ivory);
  --c-accent-ink: var(--p-plum);          /* plum as text: kickers, numerals, icons */
  --c-secondary: var(--p-copper);         /* rose copper: rules, numerals and buttons on aubergine */
  --c-secondary-line: var(--p-copper-dark);/* copper kicker text and hairline on ivory */
  --c-soft: var(--p-lilac);
  --c-soft-hover: var(--p-lilac-2);
  --c-mist: var(--p-stone-2);
  --c-band-from: var(--p-aubergine);      /* the CTA band and every dark section */
  --c-band-to: var(--p-aubergine-2);
  --c-panel: var(--p-aubergine);
  --c-on-band: var(--p-ivory);
  --c-on-band-muted: var(--p-on-dark-muted);
  --c-sage: var(--p-copper);              /* the sister's rail colour slot, copper here */
  --c-line: var(--p-line);
  --c-line-strong: var(--p-border);
  --c-line-dark: rgba(251, 248, 243, 0.16);
  --c-focus: var(--p-plum);
  --c-check: var(--p-plum);
  --c-error: var(--p-error);
  --c-footer-bg: var(--p-aubergine);
  --c-footer-text: var(--p-on-dark-muted);

  /* ---------- semantic: type (a high-contrast Garamond for headings, set bold; a humanist grotesque for text) ---------- */
  --f-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --f-text: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-head: 700;        /* Cormorant reads thin below 600: headings are bold */
  --fw-ui: 500;          /* buttons, nav, labels in Plex */
  --fw-strong: 600;
  --fs-h1: 3.5rem;       /* 56px on inner pages, line 60 */
  --lh-h1: 1.07;
  --fs-h1-hero: 4.75rem; /* 76px, the centred home hero only */
  --fs-h1-m: 2.5rem;     /* 40px on a phone (Cormorant runs small: +6 px over a sans) */
  --fs-h2: 2.75rem;      /* 44px, line 50 */
  --lh-h2: 1.14;
  --fs-h2-m: 2rem;
  --fs-h3: 1.625rem;     /* 26px serif sub-heads */
  --lh-h3: 1.25;
  --fs-h3-m: 1.4375rem;
  --fs-ui: 1.375rem;     /* 22px serif: 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.8125rem; /* 13px kickers and nav, uppercase, tracked */
  --ls-label: 0.14em;

  /* ---------- 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: 112px;
  --container: 1200px;
  --container-text: 720px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 8vw, 112px);
  --section-y-m: 56px;

  /* ---------- semantic: shape and depth (medium corners on every large element; small ones square, no pills) ---------- */
  --r-field: 14px;
  --r-btn: 14px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-photo: 16px;
  --r-pill: 14px;        /* chips are tabs, not pills */
  --shadow-soft: 0 1px 2px rgba(34, 26, 38, 0.05), 0 8px 24px rgba(34, 26, 38, 0.06);
  --shadow-lift: 0 18px 40px rgba(34, 26, 38, 0.14);

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

  /* ---------- component ---------- */
  --btn-h: 52px;
  --btn-pad: 14px 30px;
  --btn-fs: 0.9375rem;
  --field-h: 50px;
  --field-bg: transparent;   /* underline fields on the stone sheet */
  --field-pad: 12px 2px;
  --card-bg: var(--c-card);
  --card-pad: 34px 30px;
  --header-bar-h: 40px;
  --header-nav-h: 112px;     /* bar 40 + main row 72 */
}

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