/*
  Design tokens for Life at Noord — Nicholas Erreweyaert personal photography.
  Confirmed values only — no ad hoc sizes/colors introduced elsewhere.
  Layer 1 values (grid/spacing/motion) from ethos.md; Layer 2 (color/type)
  from design/brief.md. Two type sizes only — a third may NOT be added
  without designer sign-off.
*/

:root {
  /* Grid */
  --grid-columns: 12;
  --grid-gutter: 24px;
  /* Fixed, non-scaling margin — do NOT use vw/% (4K failure mode). */
  --grid-margin: 24px;

  /* Type — Helvetica Neue Regular + Bold only. TWO sizes site-wide. */
  --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-small: 0.875rem;  /* 14px — nav, captions, footer, admin UI */
  --font-size-display: 2.25rem; /* 36px — about body, contact block, detail titles, loader title (round 9: 10% down from 40px) */
  --line-height-small: 1.4;
  --line-height-display: 1.3;

  /* Spacing — 8px base unit */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);   /*   8px */
  --space-sm: calc(var(--space-unit) * 2);   /*  16px */
  --space-md: calc(var(--space-unit) * 4);   /*  32px */
  --space-lg: calc(var(--space-unit) * 8);   /*  64px */
  --space-xl: calc(var(--space-unit) * 16);  /* 128px */

  /* Color — pure monochrome, NO accent. Photography supplies all color.
     Every color in prototype/ must be one of these tokens. No greys for
     secondary text/hover without designer sign-off. */
  --color-background: #ffffff;
  --color-text: #111111;
  --color-text-inverse: #ffffff; /* loader title over photo */

  /* Round 15 — NICHOLAS, fiddle here: loading-placeholder tones,
     sampled from your jacket reference. Documented exception to the
     monochrome rule: they appear ONLY while media is still loading,
     never as interface color. */
  --color-placeholder-1: #d4ecfd; /* soft blue (round 17, Nicholas values) */
  --color-placeholder-2: #eff8b5; /* pale yellow-green (round 17) */
  --color-placeholder-3: #ffd3b5; /* peach (round 17) */

  /* Motion — short ease-out fades only */
  --motion-duration: 300ms;
  --motion-easing: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}

/* Round 14 — NICHOLAS, fiddle here: display size on phones (the
   desktop value above stays 36px). Derived from the round-13 mockups:
   title ≈ 1.5× the nav size. */
@media (max-width: 640px) {
  :root {
    --font-size-display: 1.375rem; /* 22px */
  }
}