/* ============================================================
   SCRIPT — COLOR TOKENS
   Source of truth: Script Brandguide v1.0.
   Primary Script Blue + Script Pink accent on a neutral grey base.
   "Zakelijk waar dat hoort, menselijk waar dat telt."
   ============================================================ */
:root {
  /* — Script Blue (primary; CMYK 100/20/0/0) — */
  --scr-blue: #2AA1FF;          /* Script Blue — vertrouwen & innovatie */
  --scr-blue-600: #1A96DB;      /* hover */
  --scr-blue-700: #1C7DCA;      /* press / darker */
  --scr-blue-800: #008BD2;      /* deep accent */
  --scr-blue-300: #78CDF0;      /* light blue tint */
  --scr-blue-100: #E4F3FF;      /* faint blue wash (chips, hover bg) */

  /* — Script Pink (secondary; CMYK 0/22/16/0) —
     Verzacht de zakelijke uitstraling; de menselijke kant van het
     merk. Gebruik spaarzaam: als heading-on-blue en als zachte
     callout-surface. */
  --scr-pink: #FAD5CE;          /* Script Pink — brandguide canonical */
  --scr-pink-100: #FEE2DD;      /* light tint (soft surfaces, website) */
  --scr-pink-300: #F7C4BA;      /* pink hover */

  /* — Neutrals (Script Black + grey ramp; brandguide) — */
  --scr-black: #2E2D2D;         /* Script Black (CMYK 0/0/0/95) — logo's & typografie */
  --scr-ink: #2E2D2D;           /* body text = Script Black */
  --scr-grey-700: #5E5D5D;      /* Grey 1 / Script Dark Grey — subtiele accentuering */
  --scr-grey-500: #9C9B9B;      /* Grey 2 — muted text, footer links */
  --scr-grey-300: #ECECEC;      /* Grey 3 / Script Grey — dividers, quiet surfaces */
  --scr-grey-100: #F5F5F5;      /* Grey 4 — lichte, ademende achtergrond */
  --scr-border: #D8D8D8;        /* input hairlines (website) */
  --scr-surface: #F5F5F5;       /* page panels / cards (Grey 4) */
  --scr-surface-2: #ECECEC;     /* alt card (Grey 3) */
  --scr-white: #FFFFFF;

  /* — Alert colors — UITSLUITEND voor digitale interfaces (status &
     feedback), nooit in merkcommunicatie, campagnes of drukwerk. — */
  --scr-success: #009F79;       /* Script Green — success (CMYK 91/0/65/0) */
  --scr-warning: #FAC075;       /* Script Yellow — warning (CMYK 0/30/60/0) */
  --scr-error: #ED6B6A;         /* Script Red — failure (CMYK 0/70/50/0) */

  /* — CMYK build values (drukwerk). CSS cannot express CMYK, so these
     are recorded for the printer; the hex above is the online value.
       Script Black  0/0/0/95     Script Blue  100/20/0/0
       Script Pink   0/22/16/0    Script Grey  0/0/0/10
       Script Dark Grey 0/0/0/78
     — */

  /* — Deprecated aliases (pre-brandguide names; do not use in new work) — */
  --scr-peach: var(--scr-pink);
  --scr-peach-200: var(--scr-pink);
  --scr-peach-300: var(--scr-pink-300);
  --scr-amber: var(--scr-warning);
  --scr-amber-300: var(--scr-warning);

  /* ---- Semantic aliases (use these in components) ---- */
  --text-heading: var(--scr-black);
  --text-body: var(--scr-ink);
  --text-muted: var(--scr-grey-500);
  --text-link: var(--scr-blue);
  --text-on-brand: var(--scr-white);
  --text-on-brand-accent: var(--scr-pink);

  --surface-page: var(--scr-white);
  --surface-card: var(--scr-surface);
  --surface-card-alt: var(--scr-surface-2);
  --surface-brand: var(--scr-blue);
  --surface-accent: var(--scr-pink);

  --border-hairline: var(--scr-border);

  --action-primary: var(--scr-blue);
  --action-primary-hover: var(--scr-blue-600);
  --action-primary-press: var(--scr-blue-700);
}