/* tokens.css - shelf-company-romania.com, the single source of the visual values (DESIGN.md).
 * Measured from design variant A (the owner's browser save in the project's design folder, drafts/design-harvest/variant-a/), 2026-10-24.
 * Three layers: primitives (--p-*), semantic roles (--color-*, --font-*, --space-*), component values (--c-*).
 * The generator and public/css/site.css read only the semantic and component layers.
 * Hex in the trailing comment is the sRGB equivalent, for tools that cannot read oklch. */

:root {
  /* ---------- primitives ---------- */
  --p-navy-950: oklch(24.5% 0.075 256);   /* #04203f  footer bar, hero gradient start */
  --p-navy-900: oklch(33.5% 0.105 253);   /* #00376a  header, hero ground (variant: #00386c) */
  --p-navy-800: oklch(40% 0.125 256);     /* #0c4a8a  hover on navy, gradient middle */
  --p-blue-700: oklch(46% 0.15 258);      /* #1d56a8  accent ink on light, pressed */
  --p-blue-600: oklch(51.5% 0.142 257);   /* #2a66b7  accent (variant) */
  --p-blue-500: oklch(54.8% 0.135 248);   /* #1b75bb  link, solid button (variant) */
  --p-blue-300: oklch(76% 0.07 252);      /* #9ab7e0  outline on dark, focus ring */
  --p-blue-100: oklch(94.5% 0.02 252);    /* #e6eef9  chip ground, selected row */
  --p-blue-050: oklch(97.5% 0.005 248);   /* #f4f7fa  tint panel (variant) */
  --p-indigo-900: oklch(26.9% 0.048 281); /* #22233d  consent panel, inverse (variant) */
  --p-ink-900: oklch(25.3% 0.07 251);     /* #022342  text (variant) */
  --p-ink-600: oklch(46% 0.04 252);       /* #4f5f72  secondary text (AA on white) */
  --p-ink-400: oklch(73.5% 0.032 251);    /* #9babbd  decoration only, never text on light */
  --p-grey-300: oklch(88.2% 0 0);         /* #d8d8d8  hairlines, input borders (variant) */
  --p-grey-200: oklch(93% 0 0);           /* #e7e7e7  table rules */
  --p-grey-050: oklch(98.8% 0 0);         /* #fbfbfb  page ground (variant) */
  --p-white: oklch(100% 0 0);             /* #ffffff */
  --p-amber-500: oklch(80% 0.15 80);      /* #f0ae2c  heritage detail: rules, step underline, chip dot (never text on white) */
  --p-amber-700: oklch(58% 0.13 70);      /* #a8700a  amber as text on light (AA large) */
  --p-green-600: oklch(55% 0.13 155);     /* #23885a  form success */
  --p-red-600: oklch(55% 0.19 27);        /* #c8312b  form error */

  /* ---------- semantic roles ---------- */
  --color-ground: var(--p-grey-050);
  --color-surface: var(--p-white);
  --color-tint: var(--p-blue-050);
  --color-text: var(--p-ink-900);
  --color-text-2: var(--p-ink-600);
  --color-decor: var(--p-ink-400);
  --color-border: var(--p-grey-300);
  --color-rule: var(--p-grey-200);
  --color-accent: var(--p-blue-600);
  --color-accent-ink: var(--p-blue-700);
  --color-link: var(--p-blue-500);
  --color-link-hover: var(--p-blue-700);
  --color-heritage: var(--p-amber-500);
  --color-heritage-ink: var(--p-amber-700);
  --color-inverse: var(--p-navy-900);
  --color-inverse-deep: var(--p-navy-950);
  --color-inverse-text: var(--p-white);
  --color-inverse-muted: oklch(86% 0.03 252);  /* #c9d6e8  secondary text on navy (AA) */
  --color-inverse-rule: oklch(100% 0 0 / 0.22);
  --color-panel: var(--p-indigo-900);
  --color-chip: var(--p-blue-100);
  --color-focus: var(--p-blue-300);
  --color-success: var(--p-green-600);
  --color-error: var(--p-red-600);

  /* ---------- type (Georama, self-hosted, latin + latin-ext) ---------- */
  --font-sans: "Georama", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-h1: clamp(2rem, 1.55rem + 1.6vw, 2.5rem);        /* 32 -> 40 px, 700 */
  --lh-h1: 1.2;
  --fs-h1-home: clamp(2.125rem, 1.4rem + 2.6vw, 3rem);  /* 34 -> 48 px, 700, centred home hero */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.15vw, 2.1875rem); /* 26 -> 35 px, 600 */
  --lh-h2: 1.2;
  --fs-h3: 1.25rem;     /* 20 px, 600 */
  --fs-lead: 1.125rem;  /* 18 px, 400, hero lede */
  --fs-body: 1rem;      /* 16 px, 400 */
  --lh-body: 1.5;
  --fs-ui: 0.875rem;    /* 14 px, nav on phones, labels, table cells on phones, chips */
  --fs-small: 0.75rem;  /* 12 px, footer legal, update line */
  --fs-figure: 3rem;    /* 48 px, 700, figures band numerals */
  --fs-step: 2.75rem;   /* 44 px, 300, step numerals */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- space (8 px base; the variant's 15 px cell padding kept as --space-cell) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-cell: 0.9375rem;
  --section-gap: clamp(3rem, 2rem + 3vw, 4.5rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 1.5625rem);  /* 16 -> 25 px, the variant's 25 px side margin */

  /* ---------- layout ---------- */
  --container: 88.75rem;   /* 1420 px (variant) */
  --content: 63.75rem;     /* 1020 px content column beside the sidebar */
  --measure: 48.375rem;    /* 774 px prose measure (variant) */
  --sidebar: 21.25rem;     /* 340 px "On this page" */
  --header-h: 88px;
  --header-h-phone: 64px;

  /* ---------- radii ---------- */
  --radius-btn: 10px;      /* outline and hero buttons */
  --radius-pill: 96px;     /* solid submit, consent buttons, chips */
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-panel: 24px;    /* CTA band, consent panel */
  --radius-media: 16px;

  /* ---------- shadows (variant) ---------- */
  --shadow-card: 0 2px 8px 0 oklch(26.9% 0.048 281 / 0.10);
  --shadow-float: 10px 10px 30px 0 oklch(76% 0.02 285 / 0.40);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* ---------- component values ---------- */
  --c-header-bg: var(--color-inverse);
  --c-header-rule: var(--color-inverse-rule);
  --c-hero-gradient: linear-gradient(100deg, var(--p-navy-950) 0%, var(--p-navy-900) 38%, oklch(33.5% 0.105 253 / 0.55) 62%, oklch(33.5% 0.105 253 / 0) 100%);
  --c-home-gradient: radial-gradient(120% 140% at 85% 100%, oklch(52% 0.17 262) 0%, var(--p-navy-800) 38%, var(--p-navy-950) 100%);
  --c-btn-outline-dark: oklch(100% 0 0 / 0.0);
  --c-table-head: var(--color-text-2);
  --c-table-zebra: var(--color-tint);
  --c-step-numeral: var(--color-accent);
  --c-cta-bg: var(--color-inverse);
  --c-footer-bg: var(--color-ground);
  --c-footer-bar: var(--color-inverse-deep);
  --c-ig-ink: var(--color-text);
  --c-ig-fill: var(--color-tint);
  --c-ig-accent: var(--color-accent);
  --c-ig-law: var(--color-heritage);
}

/* ---------- roles read by image-prompts.py (the ChatGPT picture infographics, /law-page-visuals prompts). Hex literals
   on purpose: the script reads hex tokens and --f-display / --f-text. Not used by the stylesheet. ---------- */
:root {
  --c-bg: #fbfbfb;
  --c-surface: #f4f7fa;
  --c-primary: #00376a;
  --c-secondary: #f0ae2c;
  --c-ink: #022342;
  --f-display: "Georama";
  --f-text: "Georama";
}