/* ============================================================
   Aqua+ design tokens.
   Overgenomen uit het Aqua+ design system (tokens/colors.css,
   typography.css, spacing.css, effects.css, versie 1.4).
   Wijzig deze waarden niet los; haal ze bij een update opnieuw
   uit het design system.
   ============================================================ */

/* ---- Lettertype ----
   Standaard Calibri (systeemfont, geen licentie nodig). Het merkfont
   Pill Gothic 600mg is betaald en de licentie beperkt tot intern
   Aqua+-gebruik; daarom niet meegeleverd. Wil je het merkfont wel
   gebruiken en is de webfont-licentie geregeld: zet de .ttf's in
   public/fonts/, herstel de @font-face-regels en zet "Pill Gothic 600mg"
   vooraan in --font-brand. */

:root {
  /* Merkkleuren */
  --aqua-blue:        #0064AF;
  --aqua-cyan:        #00A0E1;   /* alleen vlakken, niet voor tekst */
  --aqua-cyan-text:   #007EB2;
  --aqua-warm-grey:   #B4A5AA;
  --aqua-blue-dark:   #1E65A3;
  --aqua-blue-700:    #004E88;
  --aqua-pill:        #186F97;
  --aqua-sky:         #8FD0F0;

  /* Neutraal */
  --ink:              #26323D;
  --ink-soft:         #59626B;
  --card:             #F0F4F7;
  --card-alt:         #EEF3F8;
  --border:           #D8E2EA;
  --white:            #FFFFFF;
  --page:             #F6F8FA;

  /* Status, alleen functioneel */
  --green:            #23773A;
  --green-bg:         #E8F5E9;
  --red:              #C0392B;
  --red-bg:           #FDECEA;
  --amber:            #E39A1F;
  --amber-bg:         #FDF6E7;
  --amber-ink:        #9E6508;

  /* Verlopen, alleen als accentvulling */
  --aqua-gradient:    linear-gradient(135deg, #00A0E1 0%, #0064AF 100%);

  /* Typografie */
  --font-brand: Calibri, "Segoe UI", Arial, sans-serif;
  --fw-regular: 400;
  --fw-bold:    600;
  --fs-display: 2.25rem;
  --fs-h1:      1.5rem;
  --fs-h2:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;
  --lh-tight:   1.2;
  --lh-body:    1.45;
  --ls-eyebrow: 2px;

  /* Spacing, 4px-basis */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius, schaduw, focus */
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.06);
  --accent-bar:  5px;
  --focus-ring-color: #004E88;
  --focus-ring: 2px solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
  --opacity-disabled: .5;
}