/* ===== Design tokens — 1-op-1 overgenomen uit het Claude Design-systeem.
   Bron: _ds/de-3e-kerstdag-design-system-8b316ab7/tokens/
   Niet met de hand aanpassen: bij een nieuw ontwerp opnieuw overnemen. ===== */

/* ── fonts ── */
/* Webfonts — De 3e Kerstdag
   Brand manual prescribes Cormorant Garamond (display/koppen) + Inter (lopende tekst, navigatie).
   Zelf gehost in assets/fonts/ (AVG: geen verzoeken naar Google, dus geen IP-doorgifte). */
@import url("fonts.css");

/* ── colors ── */
:root{
/* ── Basis (brand manual 04 Kleurenpalet) ───────────────── */
--green-christmas:#12322B;      /* Primair · Kerstgroen · logo, dragende kleur */
--green-night:#0C221D;          /* Donker · Nachtgroen · cover, footer, diepte */
--green-stone:#4A5B55;          /* Neutraal · Steengroen · lopende tekst */
--cream-warm:#FBF7F1;           /* Primair · Warm Crème · achtergrond, rust */
--cream-soft:#F4EDE1;           /* Basis 2 · Zacht Crème · secties, afwisseling */
--gold-champagne:#AE8E58;       /* Accent · Champagne Goud · ster, CTA */
--gold-light:#C9AC7C;           /* Licht Champagne · goud op donker */
--candlelight:#E8D5B5;          /* Kaarslicht · zachte vlakken */

/* Derived tints — only ever mixes of the eight brand colours */
--green-christmas-08:color-mix(in srgb,var(--green-christmas) 8%,transparent);
--green-christmas-14:color-mix(in srgb,var(--green-christmas) 14%,transparent);
--gold-champagne-16:color-mix(in srgb,var(--gold-champagne) 16%,transparent);
--gold-champagne-32:color-mix(in srgb,var(--gold-champagne) 32%,transparent);
--cream-warm-16:color-mix(in srgb,var(--cream-warm) 16%,transparent);
--cream-warm-64:color-mix(in srgb,var(--cream-warm) 64%,transparent);

/* ── Semantic: surfaces ─────────────────────────────────── */
--surface-page:var(--cream-warm);
--surface-alt:var(--cream-soft);
--surface-card:var(--cream-warm);
--surface-card-alt:var(--cream-soft);
--surface-candle:var(--candlelight);
--surface-dark:var(--green-christmas);
--surface-deep:var(--green-night);
--surface-overlay:color-mix(in srgb,var(--green-night) 72%,transparent);

/* ── Semantic: ink ──────────────────────────────────────── */
--text-heading:var(--green-christmas);
--text-body:var(--green-stone);
--text-muted:color-mix(in srgb,var(--green-stone) 72%,var(--cream-warm));
--text-accent:var(--gold-champagne);
--text-on-dark:var(--cream-warm);
--text-on-dark-body:color-mix(in srgb,var(--cream-warm) 82%,var(--green-christmas));
--text-on-dark-accent:var(--gold-light);
--text-on-gold:var(--green-night);

/* ── Semantic: lines ────────────────────────────────────── */
--line-hairline:var(--gold-champagne-32);
--line-soft:var(--green-christmas-14);
--line-strong:var(--green-christmas);
--line-on-dark:color-mix(in srgb,var(--cream-warm) 22%,transparent);
--line-focus:var(--gold-champagne);

/* ── Semantic: interactive ──────────────────────────────── */
--action-primary-bg:var(--green-christmas);
--action-primary-bg-hover:var(--green-night);
--action-primary-text:var(--cream-warm);
--action-accent-bg:var(--gold-champagne);
--action-accent-bg-hover:#9C7D4B;
--action-accent-text:var(--green-night);
--action-quiet-text:var(--green-christmas);
--action-disabled-bg:color-mix(in srgb,var(--green-stone) 22%,var(--cream-soft));
--action-disabled-text:color-mix(in srgb,var(--green-stone) 55%,var(--cream-soft));

/* ── Semantic: status ───────────────────────────────────────
   The manual forbids loud Christmas colours (esp. bright red).
   Status therefore reads through the palette itself: green = goed,
   goud = aandacht, steengroen = neutraal. Only "kritiek" borrows a
   deep bordeaux, kept off-brand-red and reserved for form errors. */
--status-good-bg:var(--green-christmas-08);
--status-good-text:var(--green-christmas);
--status-attention-bg:var(--gold-champagne-16);
--status-attention-text:#7C5F2E;
--status-neutral-bg:color-mix(in srgb,var(--green-stone) 12%,transparent);
--status-neutral-text:var(--green-stone);
--status-critical-text:#7A2E2A;
--status-critical-bg:color-mix(in srgb,#7A2E2A 10%,transparent);

/* ── Palette distribution (manual: crème 46 · groen 36 · goud 12 · kaarslicht 6) */
--mix-cream:46%; /* @kind other */
--mix-green:36%; /* @kind other */
--mix-gold:12%; /* @kind other */
--mix-candle:6%; /* @kind other */
}

/* ── typography ── */
:root{
--font-display:"Cormorant Garamond",Garamond,"Times New Roman",serif; /* @kind font */
--font-sans:"Inter","Helvetica Neue",Arial,sans-serif; /* @kind font */
--font-body:var(--font-sans); /* @kind font */
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace; /* @kind font */

/* Weights */
--fw-display:400; /* @kind font */
--fw-display-medium:500; /* @kind font */
--fw-display-semibold:600; /* @kind font */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */

/* Display scale — Cormorant Garamond, tight leading, slight negative tracking */
--fs-display-1:clamp(3.25rem,6.2vw,5.75rem); /* @kind font */
--fs-display-2:clamp(2.5rem,4.4vw,4rem); /* @kind font */
--fs-display-3:clamp(2rem,3vw,2.75rem); /* @kind font */
--fs-display-4:1.75rem; /* @kind font */
--lh-display:1.04; /* @kind font */
--lh-display-loose:1.14; /* @kind font */
--ls-display:-0.015em; /* @kind font */

/* Sub-koppen — Cormorant Garamond Italic */
--fs-sub:clamp(1.375rem,2vw,1.75rem); /* @kind font */
--lh-sub:1.3; /* @kind font */

/* Body — Inter Light/Regular */
--fs-body-lg:1.1875rem; /* @kind font */
--lh-body-lg:1.7; /* @kind font */
--fs-body:1.0625rem; /* @kind font */
--lh-body:1.75; /* @kind font */
--fs-body-sm:0.9375rem; /* @kind font */
--lh-body-sm:1.65; /* @kind font */
--fs-caption:0.8125rem; /* @kind font */
--lh-caption:1.5; /* @kind font */

/* Label / navigatie — Inter Medium, UPPERCASE, ruime tracking */
--fs-nav:0.8125rem; /* @kind font */
--fs-label:0.6875rem; /* @kind font */
--ls-nav:0.14em; /* @kind font */
--ls-label:0.22em; /* @kind font */
--ls-eyebrow:0.32em; /* @kind font */

/* Semantic aliases */
--type-hero-family:var(--font-display); /* @kind font */
--type-heading-family:var(--font-display); /* @kind font */
--type-body-family:var(--font-sans); /* @kind font */
--type-body-weight:var(--fw-light); /* @kind font */
--type-nav-weight:var(--fw-medium); /* @kind font */
}

/* ── spacing ── */
:root{
/* 4px base, opens up fast — this brand breathes */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:24px;--space-6:32px;--space-7:40px;--space-8:56px;
--space-9:72px;--space-10:96px;--space-11:128px;--space-12:176px;

/* Semantic */
--gap-inline:var(--space-3);
--gap-stack:var(--space-4);
--gap-card:var(--space-5);
--gap-group:var(--space-7);
--section-y:var(--space-11);
--section-y-tight:var(--space-9);
--page-gutter:var(--space-6);
--content-max:1180px; /* @kind spacing */
--prose-max:62ch; /* @kind spacing */
--measure-narrow:46ch; /* @kind spacing */

/* Logo clear space = minimaal de hoogte van de ster (manual 06) */
--logo-clearspace:1em; /* @kind spacing */
}

/* ── radii ── */
:root{
/* Restrained: this is print-derived. Squares, hairlines, and pills — nothing bubbly. */
--radius-none:0;
--radius-xs:2px;
--radius-sm:3px;
--radius-md:4px;
--radius-lg:6px;
--radius-pill:999px;

--radius-card:var(--radius-sm);
--radius-button:var(--radius-xs);
--radius-input:var(--radius-xs);
--radius-tag:var(--radius-pill);
--radius-image:var(--radius-sm);
--radius-dialog:var(--radius-md);
}

/* ── elevation ── */
:root{
/* Shadows are candlelight, not UI drop-shadow: warm, low, wide. */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--line-soft);
--shadow-card:0 1px 2px color-mix(in srgb,var(--green-night) 5%,transparent),0 12px 32px -18px color-mix(in srgb,var(--green-night) 22%,transparent);
--shadow-raised:0 2px 4px color-mix(in srgb,var(--green-night) 6%,transparent),0 24px 56px -24px color-mix(in srgb,var(--green-night) 28%,transparent);
--shadow-dialog:0 40px 90px -30px color-mix(in srgb,var(--green-night) 45%,transparent);
--shadow-glow-gold:0 0 0 1px var(--gold-champagne-32),0 0 44px -12px var(--gold-champagne-32);
--focus-ring:0 0 0 2px var(--cream-warm),0 0 0 4px var(--gold-champagne);
--focus-ring-dark:0 0 0 2px var(--green-night),0 0 0 4px var(--gold-light);

--border-hairline:1px; /* @kind other */
--border-strong:1.5px; /* @kind other */
--blur-veil:14px; /* @kind other */

/* Protection gradient for type over photography (beeldstijl 03) */
--veil-bottom:linear-gradient(to top,color-mix(in srgb,var(--green-night) 88%,transparent) 0%,color-mix(in srgb,var(--green-night) 55%,transparent) 42%,transparent 100%);
--veil-full:linear-gradient(to bottom,color-mix(in srgb,var(--green-night) 30%,transparent),color-mix(in srgb,var(--green-night) 72%,transparent));
}

/* ── motion ── */
:root{
/* Calm, hospitable motion: fades and small lifts. Never bounce, never spring. */
--ease-standard:cubic-bezier(.32,.72,.24,1); /* @kind other */
--ease-out-soft:cubic-bezier(.22,1,.36,1); /* @kind other */
--ease-in-soft:cubic-bezier(.5,0,.9,.4); /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-reveal:720ms; /* @kind other */
--transition-interactive:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard); /* @kind other */
--lift-hover:translateY(-1px); /* @kind other */
--press-scale:0.985; /* @kind other */
}