/* =========================================================================
   FTW Advocaten — Design Tokens (Richting Logo-Blauw, mei 2026)
   ------------------------------------------------------------------------
   Kleurpalet afgeleid uit het FTW-logo: licht staalblauw, donker navy,
   met gebroken wit als rust-tint. Zaans groen blijft als accent, coral
   als signal. 8px-grid · Bricolage Grotesque (display) + Inter (body).
   Vorige K-blauw-versie staat in tokens.css.k-blauw.bak.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Variable woff2 — subsetten naar latin + latin-ext.
   Bron: https://fonts.google.com/specimen/Bricolage+Grotesque
         https://fonts.google.com/specimen/Inter
   Subset-tools: pyftsubset (fonttools) of @fontsource/variable.
   Bronbestanden plaatsen in /assets/fonts/.

   Daadwerkelijk gebruikte gewichten:
     Bricolage Grotesque — 500 (medium), 600 (semibold), 700 (bold)
     Inter              — 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2-variations');
}

:root {
  /* ====================================================================
     1. KLEUREN — semantisch, niet "blue-500"
     ==================================================================== */

  /* Anchor — navy in lijn met FTW-merk (subtiel lichter dan ftwadvocaten.nl-navy) */
  --color-anchor:        #1f3d70;       /* hoofdkleur: rijk navy, iets lichter dan #1c3261 */
  --color-anchor-deep:   #142a55;       /* donkerder, voor footer en contrast */
  --color-anchor-darker: #0a1a3a;       /* extreem donker, harde accents */
  --color-anchor-bright: #4573c0;       /* logo-W lichtblauw, gebruik als accent op donker */
  --color-anchor-soft:   #c7d3e8;       /* lichte hint-blauw voor pills, soft borders */
  --color-anchor-mute:   #a7a8ab;       /* logo-grijs (F + ADVOCATEN), voor meta-tekst */
  --color-anchor-mute-soft: #d6d7da;    /* lichtere variant van logo-grijs */

  /* Accent — Zaans groen (secundair, lokaal, bevestigend) */
  --color-accent:        #2f5a2c;
  --color-accent-deep:   #1f3d1d;
  --color-accent-soft:   #dde8d9;

  /* Signal — warm coral (CTA, urgentie, attentie) */
  --color-signal:        #e2754f;
  --color-signal-hover:  #d56847;
  --color-signal-soft:   #f6dccf;
  --color-signal-deep:   #9c3a1f;

  /* Neutrals — gebroken wit (koeler dan cream), grijs-blauw rules */
  --color-paper:         #ffffff;       /* zuivere kaart-achtergrond */
  --color-cream:         #f3f3ee;       /* gebroken wit, page background */
  --color-cream-2:       #e7e7e0;       /* dieper gebroken wit voor rust-blokken */
  --color-ink:           #18253a;       /* body tekst, met subtiele blauwzweem */
  --color-ink-soft:      #344056;       /* secundaire tekst */
  --color-muted:         #6c7686;       /* meta, captions */
  --color-rule:          #d9dde2;       /* koele neutrale rule */

  /* Surface-aliassen — semantisch voor sectie-achtergronden */
  --surface-base:        var(--color-cream);     /* default content */
  --surface-soft:        var(--color-cream-2);   /* visuele rust-blok tussen content */
  --surface-anchor:      var(--color-anchor);    /* CTA-zware blokken */

  /* States */
  --color-success:       #2f5a2c;       /* = accent */
  --color-warning:       #c98a14;
  --color-error:         #c14a2a;
  --color-error-soft:    #f6dccf;

  /* Focus ring (WCAG-veilig contrast op alle backgrounds) */
  --color-focus:         #1f3d70;
  --focus-ring:          0 0 0 3px rgba(31, 61, 112, 0.35);

  /* ====================================================================
     2. TYPE — schaal in rem, line-heights in unitless, letter-spacing in em
     ==================================================================== */

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Menlo', monospace;

  /* Schaal — perfect-fourth (1.333) voor display, modular minor-third voor body */
  --fs-display-xl: 6rem;       /* 96px — homepage hero */
  --fs-display-lg: 4.75rem;    /* 76px — landing/expertise hero */
  --fs-display-md: 3.5rem;     /* 56px — section headers */
  --fs-display-sm: 2.75rem;    /* 44px — page titles */

  --fs-h1: 2.25rem;            /* 36px */
  --fs-h2: 1.75rem;            /* 28px */
  --fs-h3: 1.375rem;           /* 22px */
  --fs-h4: 1.125rem;           /* 18px */

  --fs-body-lg: 1.1875rem;     /* 19px — lead paragrafen */
  --fs-body:    1rem;          /* 16px */
  --fs-body-sm: 0.875rem;      /* 14px — UI labels, captions */
  --fs-caption: 0.75rem;       /* 12px — meta, badges */
  --fs-micro:   0.6875rem;     /* 11px — uppercase eyebrows */

  /* Line-heights */
  --lh-tight:    0.96;         /* display */
  --lh-snug:     1.15;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;         /* longform body */

  /* Letter-spacing — sans-serif headings (Manrope) hebben subtiele tightening nodig */
  --ls-display:  -0.025em;     /* display tightening */
  --ls-heading:  -0.02em;
  --ls-body:     0em;
  --ls-eyebrow:  0.06em;       /* uppercase labels */
  --ls-caps:     0.14em;       /* spaced caps */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ====================================================================
     3. SPACING — strict 8px-grid (--space-1 = 4px is enige uitzondering)
     ==================================================================== */
  --space-1:  0.25rem;   /* 4px  — sub-grid only */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  2rem;      /* 32px */
  --space-8:  2.5rem;    /* 40px */
  --space-9:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-11: 5rem;      /* 80px */
  --space-12: 7rem;      /* 112px — hero verticale ruimte */

  /* ====================================================================
     4. RADII — pillen, cards, kleine UI
     ==================================================================== */
  --radius-sm:   0.5rem;       /* 8px  — inputs, kleine pills */
  --radius-md:   0.75rem;      /* 12px — buttons inline */
  --radius-lg:   1rem;         /* 16px — cards small */
  --radius-xl:   1.25rem;      /* 20px — cards medium */
  --radius-2xl:  1.5rem;       /* 24px — cards large, hero blocks */
  --radius-3xl:  2rem;         /* 32px — feature blocks */
  --radius-pill: 999px;        /* CTA's, tags */

  /* ====================================================================
     5. SHADOWS — minimaal, warm, geen "material" diepte
     ==================================================================== */
  --shadow-card:    0 6px 18px rgba(31, 61, 112, 0.08);
  --shadow-hover:   0 12px 28px rgba(31, 61, 112, 0.14);
  --shadow-cta:     0 6px 20px rgba(226, 117, 79, 0.32);
  --shadow-anchor:  0 6px 20px rgba(31, 61, 112, 0.30);

  /* ====================================================================
     6. ANIMATION — alleen wat nodig is, geen disco
     ==================================================================== */
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ====================================================================
     7. LAYOUT — container, breakpoints
     ==================================================================== */
  --container-max:     1280px;
  --container-narrow:  920px;     /* artikel-detail, FAQ */
  --container-wide:    1440px;    /* full-bleed images */
  --gutter-mobile:     1.25rem;   /* 20px */
  --gutter-tablet:     2rem;      /* 32px */
  --gutter-desktop:    2.25rem;   /* 36px */

  /* Breakpoints (gebruik in @media — niet in JS via custom-prop) */
  /* --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px; */

  /* ====================================================================
     8. Z-INDEX SCHAAL
     ==================================================================== */
  --z-base:     1;
  --z-sticky:   10;     /* header, sticky-aside */
  --z-overlay:  50;     /* mobile nav backdrop */
  --z-modal:    100;
  --z-toast:    1000;
}

/* =========================================================================
   Reduced motion — disable hover-animations + transitions
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}