/* Colors — Albo Deuren
   Source: Albo Huisstijlhandboek 2026 + Huisstijlkleuren.pdf
   Base colours: Albo blauw + Albo bruin. Secondary (accents only, never
   large fields): zand, lichtblauw, roze. */
:root {
  /* ----- Brand palette (exact brand values) ----- */
  --albo-blauw: #007793;        /* basiskleur — PMS 3145C */
  --albo-bruin: #58463c;        /* basiskleur — PMS 476C  */
  --albo-zand: #b2a192;         /* secundair  — PMS 4735C */
  --albo-lichtblauw: #46bdcf;   /* secundair  — PMS 311C  */
  --albo-roze: #de6f80;         /* secundair  — accent, NOT used in vormentaal */
  --albo-offwhite: #f8f6f4;     /* paper / canvas */

  /* ----- Albo blauw scale (primary) ----- */
  --blauw-700: #004f63;
  --blauw-600: #006076;
  --blauw-500: #007793;   /* = --albo-blauw */
  --blauw-400: #2a93ac;
  --blauw-300: #7cc0cf;
  --blauw-200: #bfe0e7;
  --blauw-100: #e3f1f4;
  --blauw-050: #f1f8f9;

  /* ----- Lichtblauw scale (secondary accent) ----- */
  --lichtblauw-600: #2ba7ba;
  --lichtblauw-500: #46bdcf;  /* = --albo-lichtblauw */
  --lichtblauw-300: #97dbe6;
  --lichtblauw-100: #e2f5f8;

  /* ----- Bruin scale (ink / warm dark) ----- */
  --bruin-700: #3c3029;
  --bruin-600: #4a3b32;
  --bruin-500: #58463c;   /* = --albo-bruin */
  --bruin-400: #7a685d;
  --bruin-300: #a99c92;
  --bruin-200: #d4cbc3;
  --bruin-100: #ece7e2;

  /* ----- Zand scale (warm neutral) ----- */
  --zand-600: #968576;
  --zand-500: #b2a192;   /* = --albo-zand */
  --zand-300: #d2c7bc;
  --zand-200: #e5ddd5;
  --zand-100: #f1ece7;

  /* ----- Roze (accent) ----- */
  --roze-500: #de6f80;
  --roze-300: #eeaab3;
  --roze-100: #fae6e9;

  /* ----- Neutrals (warm-tinted greys, anchored to offwhite) ----- */
  --paper: #f8f6f4;       /* = --albo-offwhite */
  --white: #ffffff;
  --grey-050: #f3f1ee;
  --grey-100: #e9e5e1;
  --grey-200: #d8d2cc;
  --grey-300: #bcb3aa;
  --grey-400: #948b82;
  --grey-500: #6d655d;
  --grey-700: #443d37;
  --black: #251f1b;

  /* ----- Semantic / status ----- */
  --success: #3f8f6a;
  --success-bg: #e6f1ec;
  --warning: #c8893a;
  --warning-bg: #f8ecdd;
  --danger: #c0504e;
  --danger-bg: #f8e7e6;
  --info: var(--lichtblauw-500);
  --info-bg: var(--lichtblauw-100);

  /* ================= Semantic aliases ================= */
  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--grey-050);
  --surface-inverse: var(--bruin-500);
  --surface-brand: var(--blauw-500);
  --surface-brand-soft: var(--blauw-050);
  --surface-accent-soft: var(--zand-100);

  /* Text */
  --text-strong: var(--bruin-600);   /* headings */
  --text-body: var(--bruin-500);
  --text-muted: var(--grey-500);
  --text-subtle: var(--grey-400);
  --text-on-brand: #ffffff;
  --text-on-inverse: var(--paper);
  --text-link: var(--blauw-500);
  --text-link-hover: var(--blauw-600);

  /* Borders */
  --border-subtle: var(--grey-100);
  --border-default: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-brand: var(--blauw-500);
  --border-focus: var(--blauw-500);

  /* Interactive (primary = Albo blauw) */
  --action-primary: var(--blauw-500);
  --action-primary-hover: var(--blauw-600);
  --action-primary-active: var(--blauw-700);
  --action-on-primary: #ffffff;

  /* Interactive (secondary = bruin/outline) */
  --action-secondary: var(--bruin-500);
  --action-secondary-hover: var(--bruin-600);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--blauw-500) 35%, transparent);
}