/* ==========================================================================
   Seronera mockup: design tokens          (owner: architect, S-002)
   Values are extracted from index.html / shop.html / checkout.html. Do not
   invent new hues. Token names keep the existing Dutch vocabulary so new pages
   match the protected files (nacht = night, steen = stone, oker = ochre,
   bos = forest, inkt = ink, kop = header, lijn = line).

   USAGE
     <link rel="stylesheet" href="assets/tokens.css">
     <link rel="stylesheet" href="assets/shell.css">
     <link rel="stylesheet" href="assets/components.css">
   Fonts (put in <head> before the stylesheets, same as the protected pages):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@500..800&family=Albert+Sans:ital,wght@0,300..700;1,400&display=swap">
   Status: DRAFT until the lead accepts the Craft pilot and freezes the contract.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Colour: dark base, light bands, forest band */
  --nacht: #100F0D;
  --nacht-2: #1A1814;
  --nacht-3: #0A0908;
  --lijn-d: rgba(239, 236, 236, .13);        /* hairline on dark */
  --oker: #AA8D59;                            /* primary accent */
  --oker-licht: #CDB487;                      /* accent text on dark/green, focus ring on dark */
  --oker-hover: #BC9E68;
  --oker-diep: #6B5630;                       /* accent text + labels on light */
  --bos: #082F23;
  --bos-diep: #05211A;
  --kaki: #716A56;
  --steen: #EFECE6;                           /* light band */
  --steen-2: #E5E0D6;
  --steen-lijn: #D2CBBD;                      /* hairline on light */
  --inkt: #17150F;                            /* text on light */
  --inkt-zacht: #544E40;
  --mist: #BFB9AC;                            /* soft text on dark */
  --wit: #EFECEC;                             /* text on dark */
  --goed: #1F5E45;
  --fout: #A63D2A;

  /* Type */
  --display: "Syne", "Arial Black", system-ui, sans-serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 17px;
  --fs-kop1: clamp(42px, min(6.2vw, 10.4vh), 98px);
  --fs-kop2: clamp(36px, 5.2vw, 78px);
  --fs-h3: clamp(21px, 1.9vw, 28px);
  --fs-intro: clamp(17px, 1.45vw, 19.5px);
  --fs-label: 12px;
  --fs-caption: 13px;

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1260px;
  --kop-h: 74px;
  --section-pad: clamp(96px, 11vw, 160px);
  --head-gap: clamp(48px, 6vw, 88px);
  --col-gap: clamp(40px, 6vw, 104px);
  --r-card: 22px;
  --r-tile: 14px;
  --doel: 44px;                               /* minimum touch target */

  /* z-index scale */
  --z-header: 30;
  --z-menu: 29;
  --z-panel: 31;
  --z-skip: 60;
  --z-lightbox: 70;

  /* Motion (mirrored in assets/motion.js) */
  --ease-enter: cubic-bezier(.215, .61, .355, 1);   /* ~ power3.out */
  --ease-swap: cubic-bezier(.455, .03, .515, .955); /* ~ power2.inOut */
  --dur-micro: .28s;
  --dur-reveal: .9s;
}

/* Breakpoints used across the shared files (custom properties cannot be used in
   media queries, so these are written literally): 980 nav collapses to menu
   button; 900 grids stack and header becomes fixed; 760 footer stacks and the
   breadcrumb collapses to a back link; 560 galleries/tables stack. */