/* ============================================================
   DE GOUDEN DAG | Design Tokens
   Bron: Brandbook (April 2026), Deel 2 — Visuele identiteit
   ============================================================ */

:root {
  /* --- Kleuren (Primair) --- */
  --gd-gold:        #C9A84C;  /* Huiskleur — accenten, knoppen, logo */
  --gd-black:       #1A1A1A;  /* Bijna zwart — headlines, donkere secties */
  --gd-white:       #FFFFFF;  /* Wit — achtergronden, ademruimte */

  /* --- Kleuren (Secundair) --- */
  --gd-gold-dark:   #A07830;  /* Hover-state, secundaire accenten */
  --gd-grey:        #4A4A4A;  /* Bodytekst — leesbaarder dan zwart */
  --gd-gold-light:  #FBF6EA;  /* Secundaire achtergrond — rust en kwaliteit */

  /* --- Aanvullend (afgeleid, niet in brandbook) --- */
  --gd-border:      #E8E2D0;  /* Lichte border voor cards */
  --gd-overlay-dark: rgba(26, 26, 26, 0.55); /* Foto-overlay donker */
  --gd-overlay-light: rgba(255, 255, 255, 0.92); /* Nav scrolled state */

  /* --- Typografie --- */
  --gd-font-headline: "Bebas Neue", "Oswald", "Anton", Impact, sans-serif;
  --gd-font-body:     "Inter", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --gd-font-serif:    "Lora", "Freight Text", Georgia, "Times New Roman", serif;
  --gd-font-script:   "Caveat", "Dancing Script", cursive;

  /* Type scale (modular, 1.25 ratio op desktop) */
  --gd-fs-xs:    0.875rem;   /* 14px */
  --gd-fs-sm:    1rem;       /* 16px */
  --gd-fs-base:  1.0625rem;  /* 17px - body mobiel-first */
  --gd-fs-md:    1.25rem;    /* 20px */
  --gd-fs-lg:    1.5rem;     /* 24px */
  --gd-fs-xl:    2rem;       /* 32px */
  --gd-fs-2xl:   2.75rem;    /* 44px */
  --gd-fs-3xl:   3.75rem;    /* 60px */
  --gd-fs-4xl:   5rem;       /* 80px - hero kopregel */
  --gd-fs-5xl:   6.5rem;     /* 104px - extra-large headlines */

  --gd-lh-tight:   1.05;
  --gd-lh-snug:    1.2;
  --gd-lh-normal:  1.5;
  --gd-lh-loose:   1.7;   /* Body — minimaal 1.6 per brandbook */

  --gd-tracking-tight:   -0.01em;
  --gd-tracking-normal:  0;
  --gd-tracking-wide:    0.04em;
  --gd-tracking-wider:   0.12em;  /* Voor Bebas Neue allcaps headlines */

  /* --- Spacing (8px grid) --- */
  --gd-space-1:  0.25rem;  /* 4px */
  --gd-space-2:  0.5rem;   /* 8px */
  --gd-space-3:  0.75rem;  /* 12px */
  --gd-space-4:  1rem;     /* 16px */
  --gd-space-5:  1.5rem;   /* 24px */
  --gd-space-6:  2rem;     /* 32px */
  --gd-space-7:  3rem;     /* 48px */
  --gd-space-8:  4rem;     /* 64px */
  --gd-space-9:  6rem;     /* 96px */
  --gd-space-10: 8rem;     /* 128px - sectie-padding desktop */
  --gd-space-11: 12rem;    /* 192px - hero-padding extra */

  /* --- Layout --- */
  --gd-container:        1240px;
  --gd-container-narrow: 880px;
  --gd-container-text:   720px;  /* Voor lange lopende tekst */
  --gd-gutter:           1.5rem;

  /* --- Borders & Radius --- */
  --gd-radius-sm:    4px;
  --gd-radius-md:    8px;
  --gd-radius-lg:    16px;
  --gd-radius-pill:  9999px;
  --gd-border-width: 1px;

  /* --- Shadows (subtiel, premium) --- */
  --gd-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
  --gd-shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08);
  --gd-shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.10);
  --gd-shadow-nav: 0 2px 12px rgba(26, 26, 26, 0.06);

  /* --- Motion --- */
  --gd-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --gd-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --gd-duration-fast:   180ms;
  --gd-duration-base:   280ms;
  --gd-duration-slow:   600ms;

  /* --- Z-index --- */
  --gd-z-nav:        100;
  --gd-z-modal:      200;
  --gd-z-toast:      300;
}

/* Brand-asset shortcuts (gebruik op donkere secties / hero's) */
.theme-dark {
  --gd-bg:       var(--gd-black);
  --gd-fg:       var(--gd-white);
  --gd-fg-muted: rgba(255, 255, 255, 0.72);
  --gd-accent:   var(--gd-gold);
  --gd-border-c: rgba(255, 255, 255, 0.12);
}

.theme-light {
  --gd-bg:       var(--gd-white);
  --gd-fg:       var(--gd-black);
  --gd-fg-muted: var(--gd-grey);
  --gd-accent:   var(--gd-gold);
  --gd-border-c: var(--gd-border);
}

.theme-cream {
  --gd-bg:       var(--gd-gold-light);
  --gd-fg:       var(--gd-black);
  --gd-fg-muted: var(--gd-grey);
  --gd-accent:   var(--gd-gold-dark);
  --gd-border-c: var(--gd-border);
}

/* Default = light */
html { color-scheme: light only; }
body { background: var(--gd-white); color: var(--gd-black); }