/* ==========================================================================
   AERQEN design tokens: de enige plek waar kleuren, ruimte, typografie,
   radii, schaduwen en beweging worden bepaald. Gebaseerd op DESIGN-shopify.md.
   Twee sporen (zoals in het design-systeem): .track-night (cinematisch, zwart)
   en .track-light (transactioneel, crème). Pagina's kiezen een spoor op <body>.
   ========================================================================== */
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-latin-ext-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-ext-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* kleur: canvassen */
  --night:#000000; --night-elev:#0a0a0a; --surface-dark:#1e2c31;
  --light:#ffffff; --cream:#fbfbf5;
  /* kleur: grijstrap */
  --shade-30:#d4d4d8; --shade-40:#a1a1aa; --shade-45:#8a8a93; --shade-50:#71717a; --shade-60:#52525b; --shade-70:#3f3f46;
  --hair-light:#e4e4e7; --hair-dark:#1e2c31;
  /* kleur: Aerqen-merk (spaarzaam gebruikt: logo, kleine accenten, focus) */
  --brand:#00e5ff; --brand-deep:#0099bb; --frost:#e3f6f9;
  /* ruimte (basis 8px) */
  --sp-xxs:2px; --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px; --sp-xxl:32px; --sp-huge:64px;
  --sp-section:clamp(88px,12vw,176px); --sp-section-sm:clamp(56px,7vw,104px); --gutter:clamp(20px,4vw,56px); --container:1320px; --reading:760px;
  /* radii */
  --r-xs:4px; --r-sm:5px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-pill:9999px;
  /* typografie */
  --font-display:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ui:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --fs-display-xxl:clamp(42px,7.6vw,96px); --fs-display-xl:clamp(36px,5.8vw,70px); --fs-display-lg:clamp(32px,4.4vw,55px); --fs-display-md:clamp(28px,3.6vw,48px);
  --fs-heading-xl:28px; --fs-heading-lg:24px; --fs-heading-md:20px; --fs-heading-sm:18px;
  --fs-body-lg:18px; --fs-body:16px; --fs-caption:14px; --fs-micro:13px; --fs-eyebrow:12px;
  --fw-display:330; --fw-ui:420; --fw-ui-strong:550;
  /* schaduwen / hoogte (niveaus 0-4 uit het design-systeem) */
  --sh-1:0 1px 2px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.2);
  --sh-3:0 8px 8px rgba(0,0,0,.06), 0 4px 4px rgba(0,0,0,.06), 0 2px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.08);
  --sh-4:0 25px 50px -12px rgba(0,0,0,.25);
  /* beweging */
  --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:.18s; --dur:.45s; --dur-slow:.9s;
}

/* Spoor 1: nacht (cinematisch). Standaard. */
:root,.track-night{
  --bg:var(--night); --fg:#ffffff; --fg-2:var(--shade-40); --fg-3:var(--shade-45);
  --line:var(--hair-dark); --surface:var(--night-elev); --surface-2:var(--surface-dark);
  --input-bg:var(--night-elev); --input-line:#2a3b41;
  --btn-bg:#ffffff; --btn-fg:#000000; --btn-hover:var(--shade-30);
  --outline-w:2px; --accent:var(--brand); --ok:#7ee0a4; --warn:#f3c969; --err:#ff9c92;
  --shadow-card:var(--sh-2);
}
/* Spoor 2: licht (transactioneel: app, beheer, zoeker). */
.track-light{
  --bg:var(--cream); --fg:#000000; --fg-2:var(--shade-60); --fg-3:var(--shade-50);
  --line:var(--hair-light); --surface:#ffffff; --surface-2:var(--frost);
  --input-bg:#ffffff; --input-line:#cfcfd4;
  --btn-bg:#000000; --btn-fg:#ffffff; --btn-hover:var(--shade-70);
  --outline-w:1px; --accent:var(--brand-deep); --ok:#14703a; --warn:#8a5a00; --err:#b42318;
  --shadow-card:var(--sh-3);
}