/* ============================================================
   JURISTLEXONLINE.NL — DESIGN TOKENS
   Brand Guidelines v1.0 · 2026
   ============================================================ */

:root {

  /* ── Kleurenpalet ── */
  --navy:        #082A47;   /* Primaire merkkleur  */
  --navy-deep:   #05192E;   /* Achtergrond / footer */
  --gold:        #BE9650;   /* Accent — CTA's, lijnen */
  --gold-light:  #D4B478;   /* Hover-states, highlights */
  --gold-deep:   #7D5A1E;   /* Randen, subtekst-accenten */
  --off-white:   #FAFAF8;   /* Achtergrond, lucht */
  --anthracite:  #2B2B2B;   /* Body copy */
  --white:       #FFFFFF;
  --navy-mid:    #0D3A5C;   /* Tussenschakering navigatie */
  --gold-alpha:  rgba(190, 150, 80, 0.15);   /* Subtiele highlights */
  --navy-alpha:  rgba(8, 42, 71, 0.55);      /* Overlay hero */

  /* ── Typografie ── */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-serif:   'EB Garamond', 'Garamond', Georgia, serif;
  --font-body:    'Lato', 'Calibri', system-ui, sans-serif;

  /* Type scale */
  --text-h1:      clamp(2rem, 4vw, 3rem);        /* Hero titels */
  --text-h2:      clamp(1.5rem, 3vw, 2.125rem);  /* Sectiekoppen */
  --text-h3:      clamp(1.125rem, 2vw, 1.5rem);  /* Subkoppen */
  --text-subtitle: clamp(1rem, 1.5vw, 1.25rem);  /* Taglines */
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.8125rem;

  /* Letter spacing (gravure-effect voor Cinzel) */
  --ls-display:   0.18em;
  --ls-caps:      0.12em;
  --ls-body:      0.01em;

  /* Line heights */
  --lh-display:   1.2;
  --lh-body:      1.75;
  --lh-heading:   1.3;

  /* ── Witruimte ── */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     6rem;
  --space-2xl:    9rem;
  --section-pad:  clamp(5rem, 8vw, 9rem);

  /* Container */
  --container:    1200px;
  --container-sm: 780px;
  --gutter:       clamp(1.5rem, 4vw, 3rem);

  /* ── Accenten & effecten ── */
  --gold-line:    1px solid var(--gold);
  --gold-line-2:  2px solid var(--gold);
  --radius-none:  0;        /* Merk is hard en klassiek */
  --radius-sm:    2px;      /* Enige lichte rounding toegestaan */

  /* Schaduwen */
  --shadow-card:  0 4px 32px rgba(8, 42, 71, 0.12), 0 1px 6px rgba(8, 42, 71, 0.08);
  --shadow-hero:  0 24px 80px rgba(5, 25, 46, 0.45);
  --shadow-gold:  0 2px 16px rgba(190, 150, 80, 0.25);

  /* Transities */
  --transition:   all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Gouden separator hoogte */
  --sep-height:   1px;
  --sep-width:    60px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: clamp(3rem, 8vw, 4.5rem);
    --gutter:      clamp(1rem, 4vw, 1.5rem);
    --space-lg:    2.5rem;
    --space-xl:    3.5rem;
    --ls-display:  0.12em;
  }
}