/* ==========================================================================
   variables.css
   Alle design tokens op een plek. Pas hier kleuren, fonts en spacing aan,
   dan volgt de rest van de site vanzelf.
   ========================================================================== */

:root {

  /* ----- Kleuren: merk ------------------------------------------------- */
  --color-navy:            #2f3e57;   /* hero, donkere secties            */
  --color-navy-dark:       #1e2a3d;   /* topbar, footer onderbalk         */
  --color-navy-deep:       #243146;   /* footer, formulierpaneel          */
  --color-navy-light:      #3b4c68;   /* hover op donkere vlakken         */

  --color-orange:          #f47b20;   /* primaire accentkleur             */
  --color-orange-dark:     #d9670f;   /* hover                            */
  --color-orange-soft:     #fdf0e5;   /* iconen achtergrond               */

  /* ----- Kleuren: neutraal --------------------------------------------- */
  --color-slate:           #7b8593;   /* (niet meer in gebruik)          */
  --color-heading:         #1f2a3a;
  --color-text:            #5c6674;
  --color-text-light:      #8a929e;
  --color-text-inverse:    #ffffff;
  --color-text-inverse-mut:#c3cad4;

  --color-bg:              #ffffff;
  --color-bg-alt:          #f2f5f8;   /* lichtgrijze secties              */
  --color-bg-card:         #ffffff;
  --color-border:          #e2e7ee;
  --color-border-dark:     #40506b;   /* randen op donkere vlakken        */

  --color-star:            #f4a020;

  /* ----- Typografie ----------------------------------------------------- */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:    0.75rem;    /* 12px - eyebrow, labels          */
  --fs-sm:    0.8125rem;  /* 13px - kleine tekst, topbar     */
  --fs-base:  0.9375rem;  /* 15px - bodytekst                */
  --fs-md:    1.0625rem;  /* 17px - intro                    */
  --fs-lg:    1.25rem;    /* 20px - card titel               */
  --fs-xl:    1.5rem;     /* 24px - h3                       */
  --fs-2xl:   1.75rem;    /* 28px - h2 mobiel                */
  --fs-3xl:   2.125rem;   /* 34px - h2 desktop               */
  --fs-4xl:   2.75rem;    /* 44px - h1 desktop               */

  --lh-tight:   1.2;
  --lh-heading: 1.25;
  --lh-body:    1.7;

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

  /* ----- Spacing (4px schaal) ------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Verticale ruimte per sectie. Schaalt automatisch mee met het scherm. */
  --section-padding: clamp(2.5rem, 6vw, 5rem);

  /* ----- Layout --------------------------------------------------------- */
  --container-width: 1180px;
  --container-gutter: clamp(1rem, 4vw, 2rem);
  --grid-gap: clamp(1rem, 2.5vw, 1.75rem);

  /* ----- Vormgeving ----------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 42, 58, 0.06);
  --shadow:    0 2px 10px rgba(31, 42, 58, 0.07);
  --shadow-lg: 0 10px 30px rgba(31, 42, 58, 0.10);

  --border-thin: 1px solid var(--color-border);

  --transition: 0.18s ease;
}