/* ============================================================
   DESIGN TOKENS — Byggr.nl
   ============================================================ */

:root {

  /* ── Light mode (standaard) ───────────────────────────────── */
  --color-bg:             #e4e4e4;
  --color-bg-surface:     #d4d4d4;
  --color-bg-raised:      #c8c8c8;
  --color-text:           #000000;
  --color-text-muted:     #464646;
  --color-text-disabled:  rgba(0, 0, 0, 0.25);
  --color-accent:         #B8720A;
  --color-accent-hover:   #C8820F;   /* amber-300 light — hover state knoppen/links */
  --color-accent-dim:     rgba(184, 114, 10, 0.12);
  --color-border:         rgba(0, 0, 0, 0.1);
  --color-border-accent:  rgba(184, 114, 10, 0.35);

  /* ── Steelblue — optioneel, voor technische labels / code UI ── */
  --color-tech:           #4A7FA5;
  --color-tech-dim:       rgba(74, 127, 165, 0.12);

  /* ── Grijsschaal (modus-onafhankelijk referentie) ─────────── */
  --gray-100: #c8c8c8;
  --gray-200: #d4d4d4;
  --gray-300: #e4e4e4;
  --gray-700: #464646;
  --gray-800: #1a1a1a;
  --gray-900: #111111;
  --gray-950: #000000;

  /* ── Showcase sectie — altijd donker in beide modi ───────── */
  --color-showcase-bg:    #0f0f0f;
  --color-showcase-text:  #ffffff;

  /* ── Nav scrolled achtergrond ─────────────────────────────── */
  --color-nav-scrolled:   rgba(228, 228, 228, 0.94);

  /* ── Typografie ───────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ── Tekstschaal ──────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.625rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;
  --text-5xl:  4.75rem;
  --text-6xl:  6rem;
  --text-7xl:  7.5rem;
  --text-8xl:  9.5rem;

  /* ── Letter-spacing ──────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ── Line-height ─────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.05;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-narrow:  780px;
  --container-padding: var(--space-6);

  /* ── Animaties ───────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast:   150ms var(--ease-out-expo);
  --transition-base:   250ms var(--ease-out-expo);
  --transition-slow:   450ms var(--ease-out-expo);
  --transition-reveal: 700ms var(--ease-out-expo);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;

}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:             #000000;
  --color-bg-surface:     #111111;
  --color-bg-raised:      #1a1a1a;
  --color-text:           #ffffff;
  --color-text-muted:     #cccccc;
  --color-text-disabled:  rgba(255, 255, 255, 0.25);
  --color-accent:         #D4962A;
  --color-accent-hover:   #F0BA5E;   /* amber-300 — hover state knoppen/links */
  --color-accent-dim:     rgba(212, 150, 42, 0.15);
  --color-border:         rgba(255, 255, 255, 0.1);
  --color-border-accent:  rgba(212, 150, 42, 0.35);

  /* ── Steelblue — optioneel, voor technische labels / code UI ── */
  --color-tech:           #4A7FA5;
  --color-tech-dim:       rgba(74, 127, 165, 0.15);

  /* ── Grijsschaal (modus-onafhankelijk referentie) ─────────── */
  --gray-100: #c8c8c8;
  --gray-200: #d4d4d4;
  --gray-300: #e4e4e4;
  --gray-700: #464646;
  --gray-800: #1a1a1a;
  --gray-900: #111111;
  --gray-950: #000000;
  --color-nav-scrolled:   rgba(0, 0, 0, 0.94);
}