/* tokens.css - business-in-liechtenstein.com. The source of truth for styling (DESIGN.md section 1).
 * Three layers: primitive (--p-*: raw values measured on the owner's design variant A, the save of a corporate-governance
 * site, plus the Liechtenstein flag blue) -> 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. Every
 * colour is oklch with its hex in a trailing comment (scripts/image-prompts.py reads the hex).
 * Contrast checked 2026-11-03: navy on white 16.32, on the sand 15.0; body text on the sand 13.33; muted on white 6.87, on
 * the sand 6.20; navy label on the gold button 5.28; gold ink on white 5.01, on the sand 4.52; light gold on navy 7.29;
 * on-dark muted on navy 10.60, on the footer ink 12.44; flag blue on white 12.71.
 * Navy leads by area and stays under the saturation line (chroma 0.065); the flag blue (chroma 0.149) is a detail colour only:
 * links, the focus ring, the active rule. Gold is the call to action, never a large fill.
 */
:root {
  /* ---------- primitive: colour ---------- */
  --p-navy: oklch(24.5% 0.065 261.8); /* #0e1f3f */
  --p-navy-deep: oklch(19.3% 0.046 260.6); /* #081429 */
  --p-ink: oklch(16.9% 0.025 265.2); /* #0a0f1a */
  --p-flag: oklch(32.8% 0.149 261.7); /* #002b7f */
  --p-slate: oklch(33.4% 0.044 235.3); /* #1e3a4a */
  --p-text: oklch(27.4% 0.026 230.6); /* #1a2a32 */
  --p-mid: oklch(46.7% 0.029 233.6); /* #4a5d68 */
  --p-gold: oklch(66.4% 0.083 77.4); /* #b08d57 */
  --p-gold-light: oklch(75.0% 0.085 82.1); /* #c9a96e */
  --p-gold-ink: oklch(54.5% 0.082 78.7); /* #8a6a34 */
  --p-sand: oklch(96.5% 0.010 87.5); /* #f6f3ec */
  --p-sand-2: oklch(93.2% 0.014 84.6); /* #ede8de */
  --p-sand-line: oklch(86.1% 0.023 80.7); /* #d9d0c1 */
  --p-line: oklch(91.4% 0.014 84.6); /* #e7e2d8 */
  --p-mist: oklch(95.9% 0.010 87.5); /* #f4f1ea */
  --p-white: oklch(100.0% 0.000 0); /* #ffffff */
  --p-on-dark-muted: oklch(85.8% 0.018 256.3); /* #c9d1dc */

  /* ---------- semantic: colour ---------- */
  --c-bg: var(--p-white);                 /* the page, cards, tables */
  --c-surface: var(--p-sand);             /* the alternate ground (variant A: sand sections between white ones) */
  --c-brand: var(--p-navy);               /* headings on light, icons, outlines, the soft-button label */
  --c-text-strong: var(--p-navy);
  --c-text: var(--p-text);
  --c-muted: var(--p-mid);
  --c-link: var(--p-flag);                /* running links: the flag blue as text, never a fill */
  --c-accent: var(--p-gold);              /* the primary call to action: a gold fill, navy label */
  --c-accent-hover: var(--p-gold-light);
  --c-on-accent: var(--p-navy);
  --c-accent-ink: var(--p-gold-ink);      /* gold as text or a rule on white and the sand */
  --c-gold: var(--p-gold);                /* eyebrow rules, numerals on dark, the corner bracket */
  --c-gold-light: var(--p-gold-light);    /* gold as text on navy */
  --c-gold-ink: var(--p-gold-ink);
  --c-soft: var(--p-sand-2);              /* chips, table heads, the actor tag */
  --c-soft-hover: var(--p-sand-line);     /* rails and connectors of the infographics */
  --c-mist: var(--p-mist);
  --c-band-from: var(--p-navy);           /* dark bands: the service hero, the trust band, the closing CTA */
  --c-band-to: var(--p-navy);
  --c-band-deep: var(--p-navy-deep);
  --c-panel: var(--p-slate);              /* the contact panel beside the form */
  --c-on-band: var(--p-white);
  --c-on-band-muted: var(--p-on-dark-muted);
  --c-line: var(--p-line);                /* hairlines on cards, columns and tables */
  --c-line-strong: var(--p-sand-line);    /* field borders, dashed step lines */
  --c-line-dark: oklch(100% 0 0 / 0.16);  /* hairlines on navy */
  --c-border: var(--p-mid);
  --c-focus: var(--p-flag);
  --c-check: var(--p-navy);
  --c-footer-bg: var(--p-ink);
  --c-footer-text: var(--p-on-dark-muted);

  /* ---------- semantic: type (variant A: a serif display at 400-500 with one italic word, a grotesque for text) ---------- */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-text: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-head: 500;
  --fw-strong: 600;
  --fs-h1: 3.5rem;      /* 56px (variant A 64 on the home hero), line 64 */
  --lh-h1: 1.14;
  --fs-h1-home: 4rem;   /* 64px */
  --fs-h1-m: 2.25rem;   /* 36px on a phone */
  --fs-h2: 2.5rem;      /* 40px, line 50 */
  --lh-h2: 1.25;
  --fs-h2-m: 1.875rem;
  --fs-h3: 1.5rem;      /* 24px serif sub-heads */
  --lh-h3: 1.35;
  --fs-h3-m: 1.3125rem;
  --fs-ui: 1.1875rem;   /* 19px: card titles, FAQ questions */
  --fs-text: 1.0625rem; /* 17px, line 28 */
  --lh-text: 1.65;
  --fs-small: 0.9375rem; /* 15px */
  --fs-micro: 0.8125rem; /* 13px */
  --fs-label: 0.75rem;   /* 12px: buttons and eyebrows, uppercase */
  --ls-label: 0.16em;

  /* ---------- 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: 1280px;
  --container-text: 780px;
  --gutter: clamp(24px, 4vw, 64px);
  --section-y: clamp(80px, 9vw, 120px);
  --section-y-m: 60px;

  /* ---------- semantic: shape and depth (variant A: square corners, hairlines, almost no shadow) ---------- */
  --r-field: 0;
  --r-btn: 0;
  --r-card: 0;
  --r-panel: 0;
  --r-pill: 0;
  --shadow-soft: 0 1px 2px rgba(14, 31, 63, 0.05);
  --shadow-lift: 0 14px 32px rgba(14, 31, 63, 0.10);

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

  /* ---------- component ---------- */
  --btn-h: 50px;
  --btn-pad: 16px 34px;
  --btn-fs: var(--fs-label);
  --field-h: 46px;
  --field-bg: var(--p-sand);
  --field-pad: 11px 14px;
  --card-bg: var(--c-bg);
  --card-pad: 36px 32px;
  --header-nav-h: 76px;
}

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