/*
 * kit/tokens/base.css — v3 design-system contract (research-driven redesign 2026-06-04).
 * Per-brand tokens.css overrides the brand axes (colour/font/scale VALUES); this sheet
 * defines the SYSTEM (type bindings, spacing rhythm, colour roles, editorial utilities)
 * + safe fallbacks. Loaded BEFORE the per-brand tokens.css + motion.css in Base.astro.
 * Principle: the photograph is the brand; the accent colour is ink + atmosphere, never a
 * flat fill; type and space carry the design.
 */
:root {
  /* --- colour (brand tokens.css overrides values) --- */
  --primary:        oklch(0.349 0.149 279.7);
  --primary-deep:   oklch(0.18 0.130 279.7);
  --primary-bright: oklch(0.42 0.155 279.7);
  --primary-tint:   oklch(0.75 0.040 279.7);
  /* warm-paper surface ladder (depth via temperature + 2-4% luminance, NOT saturated panels) */
  --surface:      oklch(0.992 0.004 85);
  --surface-1:    oklch(0.979 0.006 85);
  --surface-2:    oklch(0.964 0.009 85);
  --surface-sunk: var(--surface-1);
  --bg:           var(--surface);
  --ink:          oklch(0.23 0.014 70);   /* warm near-black, never #000 */
  --ink-faint:    oklch(0.47 0.014 70);
  --ink-muted:    var(--ink-faint);
  --hairline:        oklch(0.86 0.010 70);
  --hairline-rule:   1px solid var(--hairline);
  --hairline-indigo: color-mix(in srgb, var(--primary) 24%, transparent);
  --on-primary:   oklch(0.985 0.005 85);
  --scrim: linear-gradient(to top, color-mix(in srgb, var(--primary-deep) 80%, #000 8%) 0%, color-mix(in srgb, var(--primary-deep) 44%, transparent) 30%, transparent 62%);

  /* --- shape --- */
  --radius: 6px; --radius-sm: 4px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--primary-deep) 6%, transparent), 0 8px 24px -14px color-mix(in oklch, var(--ink) 30%, transparent);
  --shadow-md: 0 2px 6px color-mix(in oklch, var(--primary-deep) 8%, transparent), 0 18px 40px -20px color-mix(in oklch, var(--ink) 34%, transparent);
  --shadow-card: var(--shadow-sm);

  /* --- type families (brand overrides) --- */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body:    "Geist", system-ui, sans-serif;
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  /* --- type scale: perfect-fourth display ladder, calm body (research spec) --- */
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.1875rem;
  --fs-lead:    1.1875rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;
  /* legacy --step-* aliases (untouched components still reference these) */
  --step-hero: var(--fs-display); --step-h1: var(--fs-h1); --step-h2: var(--fs-h2);
  --step-h3: var(--fs-h3); --step-body: var(--fs-body); --step-small: var(--fs-small); --step-eyebrow: var(--fs-eyebrow);

  --lh-display:1.03; --lh-h1:1.08; --lh-h2:1.14; --lh-h3:1.22; --lh-lead:1.5; --lh-body:1.6; --lh-tight:1.1;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
  /* tracking inversion: tighten large serif, open small caps */
  --ls-display:-0.021em; --ls-h1:-0.015em; --ls-h2:-0.01em; --ls-h3:-0.005em; --ls-body:0.005em; --ls-eyebrow:0.1em;
  --measure:64ch; --measure-lead:52ch; --measure-caption:38ch; --measure-display:16ch;

  /* --- spacing scale + section rhythm --- */
  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:6rem; --space-4xl:8rem; --space-unit:1rem;
  --section-py:    clamp(3.5rem, 5vw + 1.5rem, 8rem);
  --section-py-lg: clamp(4.5rem, 7vw + 1.5rem, 10rem);
  --section-py-sm: clamp(2.5rem, 3vw + 1rem, 5rem);
  --space-section: var(--section-py);
  --container-max:75rem; --container:75rem; --container-prose:38rem; --container-narrow:30rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem); --space-gutter: var(--gutter);

  /* --- hero geometry fallbacks (Hero consumes) --- */
  --variance-hero-panel-width: 42%;
  --variance-hero-object-position: 72% 36%;
  --variance-hero-scrim-strength: 80%;
  --variance-hero-eyebrow-rule: 2rem;

  /* --- be/ component fallbacks --- */
  --legal-footer-fg: var(--on-primary);
  --legal-footer-border: color-mix(in oklch, var(--primary) 30%, transparent);
  --peppol-fg: var(--primary-deep); --peppol-bg: var(--primary-tint);
  --peppol-border: color-mix(in oklch, var(--primary) 40%, var(--surface));
  --map-h: 440px;
}

/* ---- element baseline: the editorial voice ---- */
body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); letter-spacing: var(--ls-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1,h2,h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: 1.3; margin: 0; }
p  { margin: 0; max-width: var(--measure); }
a  { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
strong { font-weight: var(--fw-medium); }

/* ---- editorial utilities ---- */
.display { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: var(--measure-display); text-wrap: balance; }
.lead    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-body); max-width: var(--measure-lead); color: var(--ink); }
.eyebrow, .kicker { display:inline-block; font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); line-height:1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--primary); }
.caption { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-small); line-height:1.45; color: var(--ink-faint); max-width: var(--measure-caption); }
.meta, .price { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* ---- layout ---- */
.container { width: min(100% - 2*var(--gutter), var(--container-max)); margin-inline: auto; }
.prose { max-width: var(--container-prose); }
.section { padding-block: var(--section-py); }
.section--showcase { padding-block: var(--section-py-lg); }
.section--tight { padding-block: var(--section-py-sm); }
.section--alt  { background: var(--surface-1); }
.section__header { max-width: var(--container-prose); }
.section__header > .eyebrow + h2, .section__header > .kicker + h2 { margin-top: var(--space-2xs); }
.section__header > h2 + .lead, .section__header > h1 + .lead { margin-top: var(--space-md); }

/* editorial 12-col split (alternate direction between sections) */
.split { display:grid; grid-template-columns:repeat(12,1fr); gap: var(--space-xl); align-items:center; }
.split__text { grid-column: 1 / 6; } .split__media { grid-column: 7 / 13; }
.split--flip .split__text { grid-column: 8 / 13; } .split--flip .split__media { grid-column: 1 / 7; }
@media (max-width:48rem){ .split{ grid-template-columns:1fr; gap:var(--space-lg);} .split__text,.split__media,.split--flip .split__text,.split--flip .split__media{ grid-column:auto;} }