/* Design tokens – Geenzame Kerst (prompt chapter 5).
 * Light is the default theme; dark is optional via [data-theme="dark"].
 * Components only use the semantic tokens below, never raw colour values.
 * Every text/background pair is checked live on #/stijlgids. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }

:root {
  /* Type */
  --font-heading: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-base: 100%;             /* the browser's own size (normally 16px). All type is in rem/em, so it scales with zoom */
  --lh: 1.6;
  --fs-small: 0.9375rem;       /* 15px – hints under fields */
  --fs-legal: 0.875rem;        /* 14px – footer/legal only */
  --fs-display: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h1: clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem);
  --fs-h2: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
  --fs-h3: 1.1rem;

  /* Shape */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --arch: 999px 999px 14px 14px;   /* arched window: subtle signature shape */

  /* Space */
  --gutter: 16px;
  --max: 1120px;
  --tap: 52px;                 /* buttons */
  --tap-min: 48px;             /* other touch targets */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 250ms;

  /* [INVULLEN] placeholder marker – identical in both themes on purpose */
  --ph-bg-1: #FFF3C4;
  --ph-bg-2: #FCEBB0;
  --ph-text: #4A3700;
  --ph-border: #B8962E;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

/* ---- Light (default) – values from chapter 5.2 ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F9F7F1;               /* warm cream ("Warm Botanical Christmas", feedback 01-10; was #F8F4EC) */
  --surface: #FFFFFF;
  --surface-soft: #F4F0E6;     /* warm cream, was #F0EBE1 */
  --text: #1F2421;
  --muted: #5C645F;
  --line: #DDE2DE;             /* table rows and dividers */
  --field-border: #7C8781;     /* added: form field borders need >= 3:1 */
  --accent: #2F4A3A;           /* pine – the only accent colour */
  --accent-hover: #243A2D;
  --on-accent: #FFFFFF;
  --accent-soft: #E6EDE7;
  --focus: #2F4A3A;
  --logo-cut: #FFFFFF;         /* garlands/baubles cut out of the filled tree */
  --logo-show-light: inline;   /* light theme: filled tree */
  --logo-show-dark: none;
  --ok: #2F6B45;    --ok-bg: #E4F0E7;
  --warn: #8A5A12;  --warn-bg: #FBF0DC;
  --danger: #A12D2D; --danger-bg: #FAE4E1;
  --shadow: 0 1px 2px rgba(31, 36, 33, .05), 0 6px 20px rgba(31, 36, 33, .06);
  --shadow-hover: 0 2px 4px rgba(31, 36, 33, .06), 0 12px 32px rgba(31, 36, 33, .10);
  /* Atmosphere of the page background (inspired by a candle-lit Christmas table, not the photo itself):
   * candle glow, a touch of wine red, champagne gold and a fine linen grain. Decorative only. */
  /* "Warm Botanical Christmas" (feedback 01-10): a radial gradient from a soft golden glow behind the
   * tree (#FAF5E8) to fresh sage at the edges (#E8EFE9). --amb-at is where the glow sits. */
  --amb-at: 50% 45%;
  --amb-base: radial-gradient(ellipse 75% 70% at var(--amb-at), #FAF5E8 0%, #F6F3EA 45%, #E8EFE9 100%);
  --amb-candle: rgba(250, 230, 180, .30);      /* a little extra golden light behind the tree */
  --amb-candle-at: var(--amb-at);
  --amb-wine: transparent;
  --amb-gold: transparent;
  --amb-grain: .40;
  --amb-bokeh: rgba(217, 119, 36, .10);        /* soft copper bokeh */
  --amb-bokeh-2: rgba(230, 200, 140, .22);
  --amb-bokeh-wine: rgba(139, 30, 43, .08);
  --amb-ember: rgba(217, 119, 36, .06);        /* only a faint copper warmth from below */
  --amb-ember-2: transparent;
  --amb-pine: rgba(30, 86, 49, .05);
  --hdr-bg: linear-gradient(180deg, #FFFFFF 0%, #FCFAF4 100%);
  --hdr-glass: rgba(252, 250, 244, .9);        /* frosted header (with backdrop blur) */
  --hdr-line: linear-gradient(90deg, rgba(30, 86, 49, .30), rgba(217, 119, 36, .50) 50%, rgba(30, 86, 49, .30));
  --ftr-glow: radial-gradient(90% 140% at 50% 140%, rgba(232, 239, 233, .9), transparent 70%);
}

/* ---- Dark (optional) – values from chapter 5.2 ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131A16;
  --surface: #1C2621;
  --surface-soft: #22302A;
  --text: #EEF1EE;
  --muted: #B3BEB7;
  --line: #34443B;
  --field-border: #7D8E84;     /* added: >= 3:1 on surface */
  --accent: #8FBF9F;           /* light pine for contrast */
  --accent-hover: #A6CFB3;
  --on-accent: #131A16;
  --accent-soft: #2A3D33;
  --focus: #8FBF9F;            /* not specified in the prompt: uses the accent */
  --logo-cut: #131A16;
  --logo-show-light: none;     /* dark theme: outline tree */
  --logo-show-dark: inline;
  --ok: #8FD1A5;    --ok-bg: #1F3A2A;
  --warn: #EDBB6B;  --warn-bg: #3A2F1B;
  --danger: #F29B90; --danger-bg: #3D2322;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  --amb-candle: rgba(255, 168, 80, .10);
  --amb-wine: rgba(150, 30, 45, .12);
  --amb-gold: rgba(214, 170, 90, .06);
  --amb-grain: .35;
  --amb-bokeh: rgba(255, 180, 90, .14);
  --amb-bokeh-2: rgba(240, 200, 130, .11);
  --amb-bokeh-wine: rgba(170, 45, 60, .16);
  --amb-ember: rgba(255, 110, 40, .16);
  --amb-ember-2: rgba(210, 60, 30, .10);
  --amb-pine: rgba(90, 150, 115, .07);
  --amb-base: none;            /* the dark theme keeps its own atmosphere */
  --amb-at: 50% 45%;
  --amb-candle-at: 8% -8%;
  --hdr-bg: linear-gradient(180deg, #1C2621 0%, #211F1B 100%);
  --hdr-glass: rgba(28, 38, 33, .78);
  --hdr-line: linear-gradient(90deg, rgba(143, 191, 159, .18), rgba(255, 128, 60, .55) 50%, rgba(143, 191, 159, .18));
  --ftr-glow: radial-gradient(90% 140% at 50% 140%, rgba(255, 110, 40, .20), transparent 70%);
}