/* ==========================================================================
   Brandatelier: design tokens. De enige plek waar kleuren en fonts staan.
   Alle andere CSS gebruikt deze variabelen. Wijzig hier, niet in de componenten.
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Bodoni Moda (variabel: gewicht en optische grootte), alleen voor het woordmerk in de footer, zoals op atelya.group. SIL Open Font License. */
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Kernpalet Brandatelier */
  --charcoal:#141311;      /* houtskool: tekst, donkere banden */
  --charcoal-2:#1b1a17;    /* footer, panelen */
  --charcoal-3:#26241f;    /* fotovakken, kaarten op donker */
  --ivory:#f5f1e7;         /* achtergrond */
  --ivory-2:#ece5d6;       /* tweede achtergrond (banden) */
  --paper:#fffdf8;         /* formuliervelden */
  --stone:#8c8577;         /* lichte steen */
  --stone-dark:#5f594d;    /* bodytekst secundair */
  --line:#b9b1a2;          /* lijnen op ivoor */
  /* Accent sinds 21 oktober 2026: oranje uit Website Brandatelier v2 (ember op donker, koper op licht).
     De namen bordeaux/beige blijven als alias, zodat de bestaande componenten niet hernoemd moeten worden. */
  --ember:#ff8b47;         /* accent op donker */
  --ember-light:#ffb88a;
  --copper:#a33c00;        /* accent op licht, call-to-action */
  --copper-deep:#7f2f00;   /* hover */
  --glow-ember:rgba(255,139,71,.35);
  --bordeaux:var(--copper);
  --bordeaux-deep:var(--copper-deep);
  --beige:var(--ember);
  --beige-light:var(--ember-light);
  --on-dark:#f5f1e7;
  --on-dark-2:#cbc4b5;     /* secundaire tekst op donker */

  /* Fonts */
  --font-serif:"Fraunces",Georgia,serif;
  --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mark:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif; /* footer-woordmerk, gelijk aan atelya.group */

  /* Maat en ritme */
  --body-size:16px;
  --body-color:var(--stone-dark);
  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
  --radius:2px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* Accent per onderdeel. Footers en panelen lezen --accent; een footervariant mag het overschrijven. */
  --accent:var(--bordeaux);
  --accent-deep:var(--bordeaux-deep);
  --accent-on-dark:var(--beige);

  /* Aliassen voor de componenten die van ETS komen. Niet gebruiken in nieuwe CSS. */
  --ets-red:var(--accent);
  --ets-red-deep:var(--accent-deep);
  --ets-night:var(--charcoal);
  --ets-paper:var(--ivory);
  --ets-linen:var(--ivory-2);
  --ets-ink:var(--charcoal);
  --ets-grey:var(--stone-dark);
  --ets-body-size:var(--body-size);
  --ets-body-color:var(--body-color);
  --font-wordmark:var(--font-serif);
  --font-body:var(--font-sans);
  --font-mono:var(--font-sans);
  --font-nav:var(--font-sans);
}