/* tokens.css - company-registration-in-romania.com. The source of truth for styling (DESIGN.md section 1).
 * Three layers: primitive (--p-*: raw values measured on the owner's reference save, variant A) -> 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 for white text was checked on 2026-10-24: red 5.63, cobalt 11.46,
 * band end 6.00, secondary blue 4.64 (AA for text at 16px and above).
 */
:root {
  /* ---------- primitive: colour ---------- */
  --p-cobalt: oklch(35.8% 0.169 265.0); /* #0f2e93 */
  --p-cobalt-2: oklch(50.6% 0.174 259.4); /* #1c5fc6 */
  --p-cobalt-deep: oklch(28.0% 0.127 265.5); /* #0a1f66 */
  --p-blue: oklch(57.4% 0.224 265.7); /* #3868fa */
  --p-blue-pale: oklch(91.8% 0.039 271.5); /* #dae3ff */
  --p-blue-pale-2: oklch(86.7% 0.059 271.3); /* #c5d2fb */
  --p-blue-mist: oklch(96.2% 0.018 272.3); /* #eef2ff */
  --p-red: oklch(54.1% 0.213 24.8); /* #ce1126 */
  --p-red-deep: oklch(48.8% 0.191 25.4); /* #b30f1e */
  --p-white: oklch(100.0% 0.000 0); /* #ffffff */
  --p-surface: oklch(96.1% 0.002 0); /* #f1f2f3 */
  --p-line: oklch(89.6% 0.011 256.7); /* #d8dde4 */
  --p-ink: oklch(32.1% 0.000 0); /* #333333 */
  --p-slate: oklch(46.2% 0.012 252.9); /* #54595f */
  --p-gray: oklch(51.0% 0.000 0); /* #666666 */

  /* ---------- semantic: colour ---------- */
  --c-bg: var(--p-white);                 /* page ground (clause 1) */
  --c-surface: var(--p-surface);          /* alternate sections (clause 1) */
  --c-brand: var(--p-cobalt);             /* brand ink: links, headings on white, soft-button labels (clause 2) */
  --c-text-strong: var(--p-cobalt);       /* headings */
  --c-text: var(--p-ink);                 /* body copy */
  --c-muted: var(--p-slate);              /* captions, meta, helper text */
  --c-accent: var(--p-red);               /* the primary call to action, Romanian flag red (clause 6, owner 2026-10-24) */
  --c-accent-hover: var(--p-red-deep);
  --c-accent-ink: var(--p-red-deep);      /* red used as text or a rule on light grounds (4.4:1 on the pale blue fails for #ce1126) */
  --c-secondary: var(--p-blue);           /* the secondary action colour (clause 4) */
  --c-soft: var(--p-blue-pale);           /* soft buttons, fields, chips (clause 5, 26) */
  --c-soft-hover: var(--p-blue-pale-2);
  --c-mist: var(--p-blue-mist);           /* the faintest blue: table heads, the practice note */
  --c-band-from: var(--p-cobalt);         /* the full-bleed band (clause 3) */
  --c-band-to: var(--p-cobalt-2);
  --c-band-deep: var(--p-cobalt-deep);
  --c-on-band: var(--p-white);
  --c-on-band-muted: oklch(94.1% 0.028 270.4); /* #e4ebff, 5.03:1 on the band's light end */
  --c-line: var(--p-line);                /* hairlines */
  --c-border: var(--p-gray);              /* the reference's 1px #666 rule, used for focus outlines only */
  --c-focus: var(--p-blue);
  --c-footer-text: var(--p-ink);          /* footer on white, #333 (clause 25) */

  /* ---------- semantic: type (clause 7, 8) ---------- */
  --f-display: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-text: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-head: 500;
  --fw-strong: 600;
  --fs-h1: 3.125rem;   /* 50px, line 60 */
  --lh-h1: 1.2;
  --fs-h1-m: 2.25rem;  /* 36px on a phone (clause 28) */
  --fs-h2: 2.5rem;     /* 40px, line 52 */
  --lh-h2: 1.3;
  --fs-h2-m: 1.75rem;
  --fs-h3: 1.875rem;   /* 30px, line 39 */
  --lh-h3: 1.3;
  --fs-h3-m: 1.375rem;
  --fs-ui: 1.25rem;    /* 20px: card titles, FAQ questions */
  --fs-text: 1rem;     /* 16px, line 24 */
  --lh-text: 1.5;
  --fs-small: 0.9375rem; /* 15px: nav, breadcrumb, labels */
  --fs-micro: 0.8125rem;

  /* ---------- semantic: space and layout (clause 9) ---------- */
  --s-1: 5px;
  --s-2: 10px;
  --s-3: 15px;
  --s-4: 20px;
  --s-5: 25px;
  --s-6: 40px;
  --s-7: 60px;
  --s-8: 100px;
  --container: 1240px;
  --gutter: 20px;
  --section-y: 80px;
  --section-y-m: 48px;

  /* ---------- semantic: shape and depth (clause 11, 12) ---------- */
  --r-field: 5px;
  --r-btn: 10px;
  --r-card: 20px;
  --r-panel: 25px;
  --r-pill: 999px;
  --shadow-soft: 0 0 12px rgba(0, 0, 0, 0.2);
  --shadow-lift: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);

  /* ---------- semantic: motion (clause 27) ---------- */
  --ease: ease;
  --t-colour: 0.3s;

  /* ---------- component ---------- */
  --btn-h: 46px;
  --btn-pad: 15px 25px;
  --btn-fs: 1rem;
  --field-h: 40px;
  --field-bg: var(--c-soft);
  --field-pad: 8px 16px;
  --card-bg: var(--c-bg);
  --card-pad: 28px;
  --header-top-h: 92px;
  --header-nav-h: 50px;
}

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