/* ==========================================================================
   Design tokens
   Colours derived from the Nöpke coat of arms and the village silhouette.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colours */
  --color-sky: #40a8fd;          /* blue of the coat of arms */
  --color-sky-soft: #699cc7;     /* sky of the village silhouette */
  --color-sky-light: #e9f4ff;
  --color-primary: #0b6bb5;      /* accessible blue for links and buttons */
  --color-primary-dark: #08548f;
  --color-meadow: #2f7d4a;       /* oak green for small accents */
  --color-ink: #16202b;
  --color-ink-muted: #556270;
  --color-surface: #ffffff;
  --color-surface-tinted: #f4f8fc;
  --color-border: #dbe6f1;
  --color-notice: #fff6e5;
  --color-notice-border: #f0c36d;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-hero: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --leading: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Shape & depth */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(22 32 43 / 0.06);
  --shadow-md: 0 8px 24px rgb(11 107 181 / 0.10);

  /* Layout */
  --container-width: 72rem;
  --container-gutter: var(--space-4);
  --header-height: 3.75rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 200ms;
}

@media (min-width: 48em) {
  :root {
    --container-gutter: var(--space-8);
    --header-height: 4.25rem;
  }
}