/* ─────────────────────────────────────────────────────────────
   Van Zomeren Isolatie — Color tokens
   Base palette mirrors the live site's CSS custom properties.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Brand: Navy (the "V", trust / structure) ── */
  --vz-navy:          #0A1628;  /* darkest — hero base, footer-ish surfaces */
  --vz-navy-mid:      #162340;  /* hero gradient mid */
  --vz-navy-deep:     #060F1C;  /* footer background */

  /* ── Brand: Blue (action / information) ── */
  --vz-blue:          #1A4C8E;  /* primary blue, links */
  --vz-blue-light:    #2E72C8;
  --vz-blue-bright:   #4A90D9;

  /* ── Brand: Orange accent (the "Z", energy / CTAs) ── */
  --vz-accent:        #F47B20;  /* primary CTA, highlights */
  --vz-accent-soft:   #F7A462;  /* gradient partner */
  --vz-accent-warm:   #FFB27A;  /* on-dark text accent */
  --vz-accent-dark:   #C45C08;  /* CTA hover / press */

  /* ── Neutrals ── */
  --vz-ink:           #0D1F33;  /* body text */
  --vz-muted:         #5A7490;  /* secondary text */
  --vz-bg:            #F3F7FD;  /* subtle page wash */
  --vz-white:         #FFFFFF;

  /* ── Semantic (status) ── */
  --vz-success:       #1DB462;
  --vz-success-bg:    #D1F2E2;
  --vz-success-ink:   #0A5C30;
  --vz-error:         #E53E3E;
  --vz-error-bg:      #FDE8E8;
  --vz-error-ink:     #7C1A1A;

  /* ─────────────────────────────────────────────
     Semantic aliases — reference these in components
     ───────────────────────────────────────────── */
  --color-text:           var(--vz-ink);
  --color-text-muted:     var(--vz-muted);
  --color-text-invert:    var(--vz-white);
  --color-heading:        var(--vz-navy);

  --color-link:           var(--vz-blue);
  --color-link-hover:     var(--vz-blue-light);

  --surface-page:         var(--vz-white);
  --surface-subtle:       var(--vz-bg);
  --surface-card:         var(--vz-white);
  --surface-dark:         var(--vz-navy);
  --surface-darker:       var(--vz-navy-deep);

  --color-primary:        var(--vz-accent);      /* orange — the CTA color */
  --color-primary-hover:  var(--vz-accent-dark);
  --color-secondary:      var(--vz-blue);        /* blue — informational */

  --border-subtle:        rgba(10, 22, 40, .08);
  --border-card:          rgba(10, 22, 40, .06);
  --border-on-dark:       rgba(255, 255, 255, .12);

  /* On-dark glass fills (forms, pills over navy) */
  --glass-fill:           rgba(255, 255, 255, .06);
  --glass-fill-strong:    rgba(255, 255, 255, .12);
  --glass-border:         rgba(255, 255, 255, .15);
}