/* tokens.css - accounting-romania.com (RomaniaAccount Pro). The source of truth for colour, type, space and shape
 * (DESIGN.md sections 1-4). Three layers: primitives (--p-*), semantic roles (--c-*, --f-*, --s-*), components
 * (--btn-*, --card-*, --field-*). Measured from the owner's design variant A (the browser save of bolliger-koenitzer.ch,
 * harvested 2026-10-16 to drafts/design-harvest/variant-a): black ink on white, the sand surface #ebeadf, Poppins 500
 * headings with a bold second part, Work Sans 18 px copy, 1px black outline pills, square photographs, no shadows.
 * Added for this site (the reference is monochrome, and client R6 wants a measurable accent): the lake at dawn of the
 * reference's own hero photograph, deep lake #1f4e5f as the accent and dawn apricot #e39a6f as the small secondary.
 * oklch values, the hex each one resolves to in the comment. */
:root {
  /* ---------- primitives ---------- */
  --p-ink:        oklch(17.8% 0 0);           /* #111111  headings, buttons, hairline rules (the reference's black) */
  --p-ink-80:     oklch(28.9% 0 0);           /* #2b2b2b  body copy (13.9:1 on white, 11.9:1 on sand) */
  --p-stone:      oklch(47% 0.010 99);        /* #5c5b55  muted text, captions (6.5:1 on white, 5.6:1 on sand) */
  --p-white:      oklch(100% 0 0);            /* #ffffff  the reference's ground */
  --p-sand:       oklch(93.5% 0.015 102.5);   /* #ebeadf  the reference's surface: footer, trust, panels */
  --p-sand-50:    oklch(96.6% 0.008 99);      /* #f5f4ee  table heads, field fills */
  --p-sand-300:   oklch(87.8% 0.015 98);      /* #d9d7cc  hairlines on white */
  --p-sand-500:   oklch(72.7% 0.016 98);      /* #a9a79c  strong hairlines, disabled */
  --p-lake:       oklch(39.9% 0.058 225);     /* #1f4e5f  THE accent: links, numerals, focus, the CTA band */
  --p-lake-700:   oklch(32.8% 0.047 225);     /* #163a47  hover and pressed */
  --p-lake-500:   oklch(49.7% 0.070 224);     /* #2f6b80  connectors, the light accent on dark */
  --p-lake-50:    oklch(92.7% 0.011 217.5);   /* #dfe9ec  pale lake: callouts, law chips */
  --p-dawn:       oklch(74.9% 0.105 51);      /* #e39a6f  the secondary: the hero rule, the "From our practice" mark */
  --p-dawn-700:   oklch(65% 0.118 47.5);      /* #c9774c  the secondary as a foreground on white (never body copy) */

  /* ---------- semantic ---------- */
  --c-bg: var(--p-white);
  --c-band: var(--p-sand);                    /* trust, FAQ and alternate sections; the footer */
  --c-soft: var(--p-sand-50);
  --c-text: var(--p-ink-80);
  --c-ink: var(--p-ink);
  --c-muted: var(--p-stone);
  --c-line: var(--p-sand-300);
  --c-line-strong: var(--p-sand-500);
  --c-rule: var(--p-ink);                     /* the reference's 1px black rules (cards, steps, FAQ) */
  --c-accent: var(--p-lake);
  --c-accent-hover: var(--p-lake-700);
  --c-accent-ink: var(--p-lake);              /* the accent as a foreground (8.6:1 on white, 7.3:1 on sand) */
  --c-accent-tint: var(--p-lake-50);
  --c-accent-soft: var(--p-lake-500);
  --c-on-accent: var(--p-white);
  --c-second: var(--p-dawn);
  --c-second-ink: var(--p-dawn-700);
  --c-footer: var(--p-sand);
  --c-on-footer: var(--p-ink);
  --c-focus: var(--p-lake-500);

  /* type: Poppins for headings, figures and the wordmark; Work Sans for running copy (self-hosted, fonts.css) */
  --f-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --w-display: 500;                           /* the reference's heading weight */
  --w-display-strong: 600;                    /* the bold half of a split heading */
  --w-light: 400;                             /* the regular half of a split heading */
  --w-strong: 600;
  --w-medium: 500;
  --w-body: 400;
  --f-mega: clamp(1.75rem, 1rem + 4vw, 4.75rem);  /* 28 -> 76 px: the owner's tagline in lowercase over the hero landscape, three lines on a desktop, four on a phone */
  --f-h1: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);         /* 34 -> 60 px: the home H1 */
  --f-h1-inner: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);  /* 30 -> 50 px: service, shelf and guide H1 */
  --f-h2: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);        /* 26 -> 38 px (the reference's 32 px section heads, one step up) */
  --f-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);      /* 18 -> 22 px */
  --f-figure: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  --f-body: 1.0625rem;                                  /* 17 px (the reference sets 18 px; 17 keeps 68ch columns on 1180) */
  --f-lead: 1.1875rem;                                  /* 19 px */
  --f-small: 0.9375rem;                                 /* 15 px */
  --f-tiny: 0.8125rem;                                  /* 13 px, the reference's footer size */
  --f-kicker: 0.8125rem;
  --lh-body: 1.65;
  --lh-tight: 1.12;
  --ls-display: 0.02em;                                 /* the reference tracks Poppins open: 2.3 px at 115 px */
  --ls-caps: 0.08em;

  /* space (8 px base, the reference's own unit) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7.5rem;
  --sec-pad: clamp(3.5rem, 2rem + 4.5vw, 7rem);         /* sections are separated by space (the reference: 72-119 px) */
  --side-pad: clamp(1rem, 0.3rem + 3vw, 3rem);
  --max-width: 1180px;
  --text-col: 68ch;
  --header-h: 104px;                                    /* the reference's tall static header (119 px), trimmed */

  /* shape: square photographs and frames, pills only on buttons and chips (the reference's one radius) */
  --r-none: 0;
  --r-sm: 2px;
  --r-pill: 999px;

  /* ---------- components ---------- */
  --btn-h: 44px;
  --btn-pad: 0 22px;
  --btn-border: 1px solid var(--c-ink);
  --btn-text: var(--c-ink);
  --btn-fill-bg: var(--c-ink);
  --btn-fill-text: var(--p-white);
  --btn-hover-bg: var(--c-accent);
  --btn-hover-text: var(--c-on-accent);
  --card-rule: 1px solid var(--c-rule);
  --card-pad: 0;
  --field-h: 52px;
  --field-border: 1px solid var(--c-ink);
  --field-border-focus: 2px solid var(--c-accent);

  --t-fast: 0.2s ease;
  --t-slow: 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}