/* ==========================================================================
   AUDIOCOM — Design Tokens (v1)
   Bron van waarheid voor kleur, typografie, ruimte, gradients.
   Rebrand 2026 — B2B-first, Fries-nuchter, strak & industrieel.
   ========================================================================== */

:root {
  /* --- Kleur: primair --- */
  --ac-green-fris:  #01D26E;  /* PRIMAIR — lichtgroen, logo + hoofdkleur (Zyra) */
  --ac-green-600:   #00B85E;  /* lichtgroen hover/donkerder */
  --ac-green-mint:  #00EB88;  /* helder mint-groen — gradient-eindpunt */

  /* --- Kleur: surfaces --- */
  --ac-green-dark:  #023A20;  /* donkergroen — hoofd-surface/bg (Zyra) */
  --ac-green-mid:   #047752;  /* middel-groen — elevated surface / gradient */
  --ac-green-deep:  #011E12;  /* dieper groen — gradient-eindpunt / diepste bg */
  --ac-off-white:   #F5F6F1;  /* warme off-white — lichte bg + tekst op donker */
  --ac-black:       #06120B;  /* bijna-zwart (groenig) — logo op licht, tekst */

  /* --- Kleur: detail --- */
  --ac-yellow:      #FFD900;  /* geel — detail-accent (Zyra), spaarzaam */
  --ac-olijf:       #CCCD00;  /* oud beeldmerk — alleen als knipoog/detail */

  /* --- Tekst-rollen --- */
  --ac-text-on-dark:        var(--ac-off-white);
  --ac-text-on-dark-muted:  rgba(245,246,241,.62);
  --ac-text-on-light:       var(--ac-black);
  --ac-text-on-light-muted: rgba(10,15,12,.60);
  --ac-text-accent:         var(--ac-green-fris);

  /* --- Typografie --- */
  --ac-font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --ac-font-display: "DM Sans", system-ui, sans-serif; /* uppercase bold = billboard-stijl */

  --ac-fs-display: clamp(40px, 6vw, 84px);  /* @kind font */
  --ac-fs-h1: clamp(32px, 4vw, 56px);  /* @kind font */
  --ac-fs-h2: clamp(24px, 3vw, 36px);  /* @kind font */
  --ac-fs-h3: 22px;  /* @kind font */
  --ac-fs-body: 17px;  /* @kind font */
  --ac-fs-small: 14px;  /* @kind font */
  --ac-fs-eyebrow: 13px;  /* @kind font */

  --ac-fw-light: 300;  /* @kind font */
  --ac-fw-regular: 400;  /* @kind font */
  --ac-fw-medium: 500;  /* @kind font */
  --ac-fw-bold: 700;  /* @kind font */

  --ac-lh-tight: 1.02;  /* @kind font */
  --ac-lh-head: 1.08;  /* @kind font */
  --ac-lh-body: 1.65;  /* @kind font */

  --ac-tracking-display: -0.02em;  /* @kind font */
  --ac-tracking-eyebrow: 0.28em;  /* @kind font */

  /* --- Ruimte --- */
  --ac-space-1: 4px;
  --ac-space-2: 8px;
  --ac-space-3: 16px;
  --ac-space-4: 24px;
  --ac-space-5: 40px;
  --ac-space-6: 64px;
  --ac-space-7: 96px;
  --ac-space-8: 140px;

  /* --- Vorm --- */
  --ac-radius: 0px;            /* SCHERP — geen afgeronde hoeken */
  --ac-border: 1px solid rgba(245,246,241,.14);  /* @kind other */
  --ac-border-light: 1px solid rgba(10,15,12,.12);  /* @kind other */

  /* --- Gradients (NIET in hero — sectie 3 / verderop) --- */
  --ac-grad-1:      linear-gradient(135deg, #9FEDE7 0%, #00EB88 100%);  /* @kind color */
  --ac-grad-2:      linear-gradient(135deg, #004D3C 0%, #047752 100%);  /* @kind color */
  --ac-grad-smooth: linear-gradient(135deg, var(--ac-green-fris) 0%, var(--ac-green-dark) 60%, var(--ac-green-deep) 100%);
  --ac-grad-fris:   linear-gradient(135deg, var(--ac-off-white) 0%, var(--ac-green-fris) 100%);
}