/*
 * Foody Magazine: centrale ontwerpvariabelen.
 * De basis komt letterlijk uit ONTWERPBRIEFING.md, onderdeel 20.
 * Uitbreidingen staan onderaan en hebben elk een concrete reden.
 */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* De briefing noemt Paper #F7F3E8, een zandtint. Op verzoek van de
     opdrachtgever (18 september 2026) is het paginavlak wit; de zandtint
     blijft als --color-zand beschikbaar voor vlakken die een warme
     ondergrond nodig hebben. */
  --color-paper: #FFFFFF;
  --color-zand: #F7F3E8;
  --color-ink: #263D32;
  --color-tomato: #B9412B;
  --color-butter: #ECDD9F;
  --color-sage: #E4E8DE;
  --color-muted: #62685E;
  --color-line: #D7D8CD;
  --color-white: #FFFFFF;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;

  --content-max: 1320px;
  --reading-max: 720px;
  --page-gutter: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;

  --radius-image: 3px;
  --radius-panel: 4px;
  --radius-button: 999px;

  --motion-fast: 160ms;
  --motion-normal: 220ms;

  /* Uitbreiding: de typografische schaal uit onderdeel 3, vloeiend tussen
     390 en 1280 pixels breed. Waarden in rem zodat tekstvergroting werkt. */
  --text-home: clamp(2.625rem, 1.803rem + 3.371vw, 4.5rem);
  --text-page: clamp(2.25rem, 1.7025rem + 2.247vw, 3.5rem);
  --text-section: clamp(1.75rem, 1.476rem + 1.124vw, 2.375rem);
  --text-card-lg: clamp(1.5rem, 1.39rem + 0.449vw, 1.75rem);
  --text-card-sm: clamp(1.3125rem, 1.285rem + 0.112vw, 1.375rem);
  --text-intro: clamp(1.125rem, 1.07rem + 0.225vw, 1.25rem);
  --text-article: clamp(1.0625rem, 1.035rem + 0.112vw, 1.125rem);
  --text-ui: 1rem;
  --text-meta: 0.875rem;
  --text-label: 0.75rem;

  /* Uitbreiding: afstand tussen hoofdsecties, 48-64 mobiel en 80-112 desktop. */
  --section-gap: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);

  /* Uitbreiding: randen van invoervelden en interactieve grenzen moeten
     duidelijker zijn dan Line (onderdeel 2). Muted haalt 5,4:1 op Paper. */
  --color-field-border: var(--color-muted);

  /* Uitbreiding: de enige schaduw, voor overlays boven de pagina. */
  --shadow-overlay: 0 12px 32px rgba(38, 61, 50, 0.14), 0 2px 6px rgba(38, 61, 50, 0.08);

  --header-height: 72px;
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 32px;
  }
}

@media (min-width: 1100px) {
  :root {
    --page-gutter: 48px;
    --header-height: 100px;
  }
}