/* ============================================================================
   NassLabs SEO OS — Design Tokens
   token.css · levering aan development (app /admin + control /control)
   ----------------------------------------------------------------------------
   Bron: NassLabs merk-tokens (Gate 3) + de UI-beslissingen uit de Figma-build.

   GEBRUIK
   - Zet deze file als eerste in je CSS-bundel (of importeer 'm in je root).
   - De LICHTE app (/admin, klant-app) gebruikt :root standaard.
   - De DONKERE control-/owner-wereld (/control): zet data-register="2" op de
     root van dat panel  ->  <div data-register="2"> … </div>  (of body[data-register="2"]).
     Alle semantische tokens (surface/text/border/brand/danger…) wisselen dan mee;
     je componenten hoeven niets te weten van het register.

   PRINCIPES
   - Twee "registers": Register 1 = licht/paper (default), Register 2 = donker/groen.
   - Rolverdeling accenten:  lime = identiteit/"de dot" (spaarzaam) ·
     blauw = interactie/tech/data/links · mint = signaal/live/succes.
   - Radius: oppervlakken afgerond (sm/md/lg); DATA + de dot zijn SCHERP (radius 0).
   - Functioneel rood ALLEEN voor echte fouten/kapotte staten (niet voor lage scores).

   FONTS
   - Display/body = Neue Haas Grotesk (Adobe Fonts — activeren in de build).
     Inter staat als robuuste fallback; in Figma is met Inter geprototypet.
   - Space Mono = Labs-labels/meta (uppercase + tracking 0.16em).
   - Caveat = script-accent, SPAARZAAM (één woord/frase; nooit UI/cijfer).
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- PRIMITIVES */
  --nl-green-900: #06231D;
  --nl-green-800: #0A3328;
  --nl-green-700: #0C4034;
  --nl-green-600: #076653;  /* merk-groen (logo) */
  --nl-green-500: #0A8A6F;  /* accent/border op donker, niet kleine tekst */
  --nl-green-400: #13B58F;  /* leesbaar groen als tekst op donker */
  --nl-sage-300:  #B8CCBA;
  --nl-mintwash-200: #C9F2C7;

  --nl-lime-500:  #DAEA4B;  /* merk-lime / de dot */
  --nl-lime-600:  #B9D02F;  /* lime als ink (tekst) */

  --nl-blue-300:  #7C8CFF;  /* linktekst op donker */
  --nl-blue-500:  #2A3BE0;  /* knop-vlak / interactief */
  --nl-blue-600:  #2233CC;
  --nl-blue-700:  #1A24A8;  /* linktekst op licht */

  --nl-mint-400:  #4AEAAB;

  --nl-paper-100: #FFFDEC;
  --nl-paper-200: #F4F3E4;
  --nl-paper-300: #ECEAD7;
  --nl-ink-900:   #0D0704;

  /* Functionele status-kleuren (toegevoegd t.b.v. UI-states) */
  --nl-danger:        #BE3A2B;  /* foutstaat op licht (mislukte actie, kapot) */
  --nl-danger-bg:     #F7E3DF;  /* zacht vlak achter een foutmelding (licht) */
  --nl-danger-onDark: #FF7556;  /* foutstaat op donker (control panel) */

  /* =============================================================== SEMANTIC
     Register 1 — LICHT (default voor de app / /admin) */
  --nl-surface:        var(--nl-paper-200);  /* pagina-achtergrond */
  --nl-surface-raised: var(--nl-paper-100);  /* kaarten, inputs, panelen */
  --nl-surface-raised-2: var(--nl-paper-300);/* genest/zachte highlight, tracks */
  --nl-surface-dim:    var(--nl-paper-300);

  --nl-text:        var(--nl-green-900);
  --nl-text-muted:  rgba(6, 35, 29, 0.62);
  --nl-text-subtle: rgba(6, 35, 29, 0.45);
  --nl-text-onFill: var(--nl-paper-100);     /* tekst op blauw/donker vlak */

  --nl-brand:       var(--nl-green-600);
  --nl-accent:      var(--nl-lime-500);       /* "de dot" — spaarzaam */
  --nl-accent-ink:  var(--nl-lime-600);
  --nl-interactive: var(--nl-blue-500);       /* primaire knoppen */
  --nl-interactive-hover: var(--nl-blue-600);
  --nl-link:        var(--nl-blue-700);
  --nl-signal:      var(--nl-mint-400);       /* live/succes-indicator */
  --nl-success:     var(--nl-green-600);
  --nl-success-wash: var(--nl-mintwash-200);

  --nl-border:      rgba(7, 102, 83, 0.16);
  --nl-border-strong: rgba(7, 102, 83, 0.28);

  /* Status / scoring tiers (gebruikt o.a. in scores, audits, GEO-gereedheid) */
  --nl-status-good:    var(--nl-green-600);   /* score >= ~60-80 / consistent  */
  --nl-status-attention: var(--nl-lime-500);  /* aandacht / 50-79 / warn        */
  --nl-status-bad:     var(--nl-danger);      /* < 50 / 0-punten / failing      */

  /* ============================================================== TYPOGRAFIE */
  --nl-font-display: "neue-haas-grotesk-display", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --nl-font-body:    "neue-haas-grotesk-text", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --nl-font-mono:    "Space Mono", ui-monospace, Menlo, monospace;
  --nl-font-script:  "Caveat", "Segoe Script", cursive; /* SPAARZAAM */

  /* type scale */
  --nl-text-micro:   11px;
  --nl-text-caption: 12px;
  --nl-text-sm:      14px;
  --nl-text-base:    16px;
  --nl-text-lg:      18px;
  --nl-text-xl:      22px;
  --nl-text-2xl:     28px;
  --nl-text-3xl:     36px;
  --nl-text-4xl:     52px;
  --nl-text-5xl:     72px;
  --nl-text-6xl:     96px;

  --nl-leading-tight:   1.0;
  --nl-leading-display: 1.05;
  --nl-leading-heading: 1.15;
  --nl-leading-body:    1.55;
  --nl-leading-mono:    1.45;

  --nl-tracking-display: -0.025em;
  --nl-tracking-tight:   -0.015em;
  --nl-tracking-normal:  0;
  --nl-tracking-label:   0.16em;  /* Space Mono labels, uppercase */
  --nl-tracking-mono:    0.02em;

  --nl-weight-regular: 400;
  --nl-weight-medium:  500;
  --nl-weight-bold:    700;
  --nl-weight-black:   900;

  /* ================================================== SPACE / RADIUS / BORDER */
  --nl-space-0:  0;
  --nl-space-1:  4px;
  --nl-space-2:  8px;
  --nl-space-3:  12px;
  --nl-space-4:  16px;
  --nl-space-5:  24px;
  --nl-space-6:  32px;
  --nl-space-7:  48px;
  --nl-space-8:  64px;
  --nl-space-9:  96px;
  --nl-space-10: 128px;

  --nl-radius-none: 0;       /* dot + data: SCHERP */
  --nl-radius-sm:   8px;
  --nl-radius-md:   12px;
  --nl-radius-lg:   16px;
  --nl-radius-pill: 999px;

  --nl-border-hair: 1px;
  --nl-border-base: 1.5px;

  /* Schaduw — ALLEEN Register 1 (licht) */
  --nl-shadow-sm: 0 1px 2px rgba(6, 35, 29, 0.06), 0 2px 8px rgba(6, 35, 29, 0.05);
  --nl-shadow-md: 0 4px 12px rgba(6, 35, 29, 0.08), 0 12px 32px rgba(6, 35, 29, 0.06);
  --nl-shadow-modal: 0 14px 36px rgba(6, 35, 29, 0.30);

  /* layout */
  --nl-container:        1200px;
  --nl-container-narrow: 768px;
  --nl-gutter:           24px;
  --nl-measure:          66ch;

  /* ===================================================================== MOTION
     Karakter: kalm, precies, zelfverzekerd. GEEN bounce/overshoot. */
  --nl-dur-micro:      120ms;  /* hovers, kleine state-changes */
  --nl-dur-base:       220ms;  /* standaard transition */
  --nl-dur-slow:       400ms;  /* reveals, grotere elementen */
  --nl-dur-deliberate: 600ms;  /* hero/statement-momenten */

  --nl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nl-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --nl-ease-snap:     cubic-bezier(0.6, 0, 0.2, 1);

  --nl-blink: 1s; /* cursor-hartslag, steps(2) — de "nooit stil"-signatuur */
}

/* ============================================================================
   Register 2 — DONKER (control panel / owner-wereld, /control)
   Zet data-register="2" op de root van dat panel.
   Alleen de semantische tokens wisselen; primitives, type, space, radius en
   motion blijven gelijk. Schaduwen worden bewust uitgezet (alleen Register 1).
   ========================================================================== */
[data-register="2"] {
  --nl-surface:          var(--nl-green-900);
  --nl-surface-raised:   var(--nl-green-800);
  --nl-surface-raised-2: var(--nl-green-700);
  --nl-surface-dim:      var(--nl-green-800);

  --nl-text:        var(--nl-paper-200);
  --nl-text-muted:  rgba(244, 243, 228, 0.62);
  --nl-text-subtle: rgba(244, 243, 228, 0.45);
  --nl-text-onFill: var(--nl-paper-200);

  --nl-brand:       var(--nl-green-400);      /* groen als tekst op donker */
  --nl-accent:      var(--nl-lime-500);
  --nl-interactive: var(--nl-blue-500);
  --nl-interactive-hover: var(--nl-blue-600);
  --nl-link:        var(--nl-blue-300);       /* link op donker */
  --nl-signal:      var(--nl-mint-400);
  --nl-success:     var(--nl-mint-400);
  --nl-success-wash: rgba(74, 234, 171, 0.14);

  --nl-border:        rgba(244, 243, 228, 0.12);
  --nl-border-strong: rgba(244, 243, 228, 0.20);

  --nl-status-good:      var(--nl-mint-400);
  --nl-status-attention: var(--nl-lime-500);
  --nl-status-bad:       var(--nl-danger-onDark);

  --nl-danger:    var(--nl-danger-onDark);
  --nl-danger-bg: #3A140C; /* zacht donkerrood vlak achter een foutmelding */

  /* geen drop-shadows op donker */
  --nl-shadow-sm: none;
  --nl-shadow-md: none;
}

/* ============================================================================
   Optioneel: handige defaults + de signatuur-keyframes.
   Verwijder dit blok als je alleen de variabelen wilt leveren.
   ========================================================================== */
@keyframes nl-blink  { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
@keyframes nl-reveal { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}