/* ==========================================================================
   tokens.css — Hands of Luxury Clean
   --------------------------------------------------------------------------
   Eén bron van waarheid voor de design language. Bevat ALLEEN custom
   properties (CSS variables) — geen selectors, geen resets, geen layout.
   Wordt altijd als eerste stylesheet geladen.

   ARCHITECTUUR:
   :root {} bevat de lichte defaults — veilig voor alle bestaande pagina's.
   .hol-theme-dark {} overschrijft naar het donkere editoriaal-palet uit
   de v5.html bron van waarheid. front-page.php activeert dit via body_class.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOR — Premium neutral palette (LIGHT defaults)
     Veilige basis voor microcement-, marmerlook- en overige pagina's.
     ---------------------------------------------------------------------- */

  --hol-color-bg:                #f7f5f1;     /* warme off-white */
  --hol-color-bg-alt:            #efece6;     /* iets dieper voor secties */
  --hol-color-bg-deep:           #1a1816;     /* near-black voor donkere secties */

  --hol-color-ink:               #1a1816;     /* primaire tekstkleur */
  --hol-color-ink-soft:          #4a4641;     /* secundaire tekst */
  --hol-color-ink-mute:          #807a72;     /* tertiaire / metadata */

  --hol-color-line:              #d9d4c9;     /* divider / border */
  --hol-color-line-soft:         #e8e3d8;     /* lichte divider */

  --hol-color-accent:            #b08a4d;     /* warm brons / luxe accent */
  --hol-color-accent-hover:      #8a6a36;     /* hover state */
  --hol-color-accent-deep:       #8a6a36;     /* alias — backward compat */
  --hol-color-accent-soft:       #d9c3a0;     /* highlight tint */

  --hol-color-on-deep:           #f7f5f1;     /* tekst op donkere bg */
  --hol-color-on-deep-soft:      #b8b2a8;     /* secundaire tekst op donkere bg */

  --hol-color-border:            rgba(26, 24, 22, 0.08);  /* generieke border */
  --hol-color-nav-bg:            rgba(247, 245, 241, 0.92); /* header scroll-state */

  --hol-color-success:           #4a7a4a;
  --hol-color-error:             #9b3a3a;

  /* Card tokens (light) */
  --hol-color-card-bg:           var(--hol-color-bg);
  --hol-color-card-border:       var(--hol-color-line-soft);

  /* ----------------------------------------------------------------------
     SPACING — Modular scale (geometric, base 4px)
     Gebruik altijd deze tokens, nooit hardcoded pixels.
     ---------------------------------------------------------------------- */

  --hol-space-3xs:  4px;
  --hol-space-2xs:  8px;
  --hol-space-xs:   12px;
  --hol-space-sm:   16px;
  --hol-space-md:   24px;
  --hol-space-lg:   32px;
  --hol-space-xl:   48px;
  --hol-space-2xl:  64px;
  --hol-space-3xl:  96px;
  --hol-space-4xl:  128px;
  --hol-space-5xl:  160px;

  /* Section padding-blok — gebruik deze voor de standaard sectie-rhythm */
  --hol-section-py:        clamp(80px, 10vw, 140px);
  --hol-section-py-tight:  clamp(48px, 7vw, 96px);
  --hol-section-py-loose:  clamp(96px, 12vw, 192px);

  /* ----------------------------------------------------------------------
     LAYOUT — Container widths
     ---------------------------------------------------------------------- */

  --hol-container-max:       1320px;
  --hol-container-narrow:    920px;
  --hol-container-wide:      1560px;
  --hol-container-gutter:    clamp(20px, 4vw, 48px);

  /* Content widths (voor prose/tekst-blokken) */
  --hol-content-narrow:      600px;
  --hol-content-default:     880px;
  --hol-content-wide:        1200px;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */

  --hol-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                   Helvetica, Arial, sans-serif;
  --hol-font-serif: "Iowan Old Style", "Apple Garamond", Baskerville,
                    "Times New Roman", "Droid Serif", Times, "Source Serif Pro",
                    serif;
  --hol-font-display: var(--hol-font-serif);
  --hol-font-body:    var(--hol-font-sans);

  /* Type scale — fluid via clamp() */
  --hol-fs-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --hol-fs-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --hol-fs-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --hol-fs-md:    1.1875rem;
  --hol-fs-lg:    clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --hol-fs-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --hol-fs-2xl:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --hol-fs-3xl:   clamp(2.5rem, 1rem + 4vw, 5rem);
  --hol-fs-4xl:   clamp(2.75rem, 5.5vw, 4.75rem);
  --hol-fs-5xl:   clamp(3rem, 0.5rem + 7vw, 8rem);

  --hol-lh-tight:    1.15;
  --hol-lh-snug:     1.25;
  --hol-lh-normal:   1.55;
  --hol-lh-loose:    1.8;

  --hol-tracking-tight:  -0.02em;
  --hol-tracking-snug:   -0.01em;
  --hol-tracking-normal: 0;
  --hol-tracking-wide:   0.04em;
  --hol-tracking-eyebrow: 0.16em;

  --hol-fw-light:    300;
  --hol-fw-regular:  400;
  --hol-fw-medium:   500;
  --hol-fw-semi:     600;
  --hol-fw-bold:     700;

  /* ----------------------------------------------------------------------
     RADIUS
     ---------------------------------------------------------------------- */

  --hol-radius-xs:  4px;
  --hol-radius-sm:  6px;
  --hol-radius-md:  12px;
  --hol-radius-lg:  20px;
  --hol-radius-xl:  32px;
  --hol-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     SHADOWS — subtiel, premium
     ---------------------------------------------------------------------- */

  --hol-shadow-xs:  0 1px 2px rgba(26, 24, 22, 0.04);
  --hol-shadow-sm:  0 2px 8px rgba(26, 24, 22, 0.06);
  --hol-shadow-md:  0 8px 24px rgba(26, 24, 22, 0.08);
  --hol-shadow-lg:  0 24px 60px rgba(26, 24, 22, 0.12);
  --hol-shadow-xl:  0 40px 100px rgba(26, 24, 22, 0.16);

  /* Gold glow — hex fallback voor oklch() */
  --hol-shadow-gold: 0 0 40px rgba(201, 148, 58, 0.12);

  /* ----------------------------------------------------------------------
     MOTION — Verfijnd, performance-first
     ---------------------------------------------------------------------- */

  --hol-ease-standard:  cubic-bezier(0.32, 0.08, 0.24, 1);
  --hol-ease-out:       cubic-bezier(0.33, 1, 0.68, 1);       /* ~GSAP power3.out */
  --hol-ease-out-heavy: cubic-bezier(0.16, 1, 0.3, 1);        /* ~GSAP power4.out */
  --hol-ease-in:        cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --hol-ease-emphasis:  cubic-bezier(0.7, 0, 0.2, 1);

  --hol-duration-instant:  120ms;
  --hol-duration-fast:     200ms;
  --hol-duration-base:     360ms;
  --hol-duration-slow:     600ms;
  --hol-duration-slower:   800ms;
  --hol-duration-cinematic: 1200ms;

  /* Gold gradient (voor shimmer-effect) */
  --hol-gold-gradient: linear-gradient(
    135deg,
    #C9943A 0%,
    #E0B96A 25%,
    #F5D998 50%,
    #E0B96A 75%,
    #C9943A 100%
  );

  /* ----------------------------------------------------------------------
     Z-INDEX scale
     ---------------------------------------------------------------------- */

  --hol-z-base:      1;
  --hol-z-raised:    10;
  --hol-z-sticky:    100;
  --hol-z-overlay:   500;
  --hol-z-modal:     1000;
  --hol-z-toast:     1500;

  /* ----------------------------------------------------------------------
     BREAKPOINTS — alleen voor documentatie / JS-uitlezing.
     ---------------------------------------------------------------------- */

  --hol-bp-sm:  640px;
  --hol-bp-md:  860px;
  --hol-bp-lg:  1080px;
  --hol-bp-xl:  1320px;

  /* ----------------------------------------------------------------------
     FOCUS
     ---------------------------------------------------------------------- */

  --hol-focus-ring: 0 0 0 3px rgba(176, 138, 77, 0.4);
}

/* ===========================================================================
   DARK EDITORIAL THEME
   ---------------------------------------------------------------------------
   Geactiveerd via .hol-theme-dark op <body>. Overschrijft de lichte defaults
   naar het Saint Laurent / The Row–palet uit de v5.html bron van waarheid.
   Alleen de homepage gebruikt dit initieel; andere pagina's kunnen opt-in.
   =========================================================================== */

.hol-theme-dark {

  /* Palette */
  --hol-color-bg:           #0E0C09;
  --hol-color-bg-alt:       #181410;
  --hol-color-bg-deep:      #0A0907;

  --hol-color-ink:          #EDE5D8;
  --hol-color-ink-soft:     #C4B49A;
  --hol-color-ink-mute:     #8A7D6B;

  --hol-color-line:         rgba(237, 229, 216, 0.12);
  --hol-color-line-soft:    rgba(237, 229, 216, 0.07);

  --hol-color-accent:       #C9943A;
  --hol-color-accent-hover: #D4A94F;
  --hol-color-accent-deep:  #E0B96A;
  --hol-color-accent-soft:  #F5D998;

  --hol-color-on-deep:      #EDE5D8;
  --hol-color-on-deep-soft: #C4B49A;

  --hol-color-border:       rgba(201, 148, 58, 0.15);
  --hol-color-nav-bg:       rgba(14, 12, 9, 0.4);

  /* Card tokens (dark) */
  --hol-color-card-bg:      #1E1A15;
  --hol-color-card-border:  rgba(237, 229, 216, 0.07);

  /* Surface variants (donkere lagen) */
  --hol-color-surface:      #181410;
  --hol-color-surface-2:    #1E1A15;
  --hol-color-surface-offset: #252018;

  /* Divider */
  --hol-color-divider:      #312A22;

  /* Shadows (donker context — diepere shadows) */
  --hol-shadow-md:  0 8px 24px rgba(0, 0, 0, 0.24);
  --hol-shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.40);
  --hol-shadow-xl:  0 40px 100px rgba(0, 0, 0, 0.50);

  /* Focus ring past mee */
  --hol-focus-ring: 0 0 0 3px rgba(201, 148, 58, 0.35);

  /* Typography: premium webfonts */
  --hol-font-display: "Cormorant Garamond", Georgia, serif;
  --hol-font-body:    "Satoshi", "DM Sans", "Helvetica Neue", sans-serif;
}

/* Reduced motion override — alle durations naar near-zero */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hol-duration-instant:  0ms;
    --hol-duration-fast:     0ms;
    --hol-duration-base:     0ms;
    --hol-duration-slow:     0ms;
    --hol-duration-slower:   0ms;
    --hol-duration-cinematic: 0ms;
  }
}