/* SxBlue / Superp — Color tokens
   ----------------------------------------------------------------
   Brand palette (from brand guidelines):
     #00343C  deep teal   — the ink / primary dark
     #39C2DD  cyan        — the signature brand accent
     #F2E6D0  sand         — warm secondary surface
     #F5F0EA  linen        — warm off-white page
     #E2E6E7  mist         — cool neutral / borders
     #FAFAFA  paper        — near-white surface
   The identity leans on a confident deep teal + a bright cyan pop,
   grounded by warm sand/linen neutrals — down-to-earth, not cold. */

:root {
  /* ---- Brand scale: teal -------------------------------------- */
  --teal-900: #00252b;
  --teal-800: #00343c; /* core brand ink */
  --teal-700: #0a4952;
  --teal-600: #135e69;
  --teal-500: #1f7d8b;
  --teal-400: #3ea0af;
  --teal-300: #74c2cd;
  --teal-200: #aaddE4;
  --teal-100: #d8f0f4;
  --teal-050: #eef9fb;

  /* ---- Brand scale: cyan (signature accent) ------------------- */
  --cyan-700: #1a93ad;
  --cyan-600: #26a8c4;
  --cyan-500: #39c2dd; /* core brand cyan */
  --cyan-400: #5fd0e6;
  --cyan-300: #8adeee;
  --cyan-200: #b6ecf5;
  --cyan-100: #e0f7fb;

  /* ---- Warm neutrals ------------------------------------------ */
  --sand-500: #e7d3ad;
  --sand-400: #f2e6d0; /* warm secondary surface */
  --linen-500: #efe6da;
  --linen-400: #f5f0ea; /* warm page background */

  /* ---- Cool neutrals ------------------------------------------ */
  --ink-900: #071b1f;
  --grey-800: #33474b;
  --grey-600: #5c6f73;
  --grey-500: #7f9296;
  --grey-400: #a9b8bb;
  --mist-400: #e2e6e7; /* borders / dividers */
  --paper-100: #fafafa;
  --white: #ffffff;

  /* ---- Semantic / status -------------------------------------- */
  --success-500: #2f9e6b;
  --success-100: #dcf3e8;
  --warning-500: #e0a13a;
  --warning-100: #faeecf;
  --danger-500: #d1503f;
  --danger-100: #f8e0da;
  /* De -700-varianten zijn de TEKST-kleuren van de status-schaal: de -500's halen als
     tekst op wit geen WCAG AA (success-500 = 2,9:1, warning-500 = 2,0:1). Ze stonden al
     tientallen keren als losse hex in app.js omdat er geen token voor was; hier staan ze
     nu als bron. --danger-600 bestond nergens terwijl de code er wel naar verwees
     (var(--danger-600,#b00)) — elke foutmelding in Beheer viel dus terug op een
     schreeuwend #bb0000 buiten het palet. */
  --success-700: #1c6b47;
  --warning-700: #8a5a00;
  --danger-600: #b23c2e;
  --violet-700: #5b3fb0; /* categorie "Technologie" in de repository/matching */
  --violet-100: #ede9fe;
  --info-500: var(--cyan-500);
  --info-100: var(--cyan-100);

  /* =================================================================
     SEMANTIC ALIASES — reference these in components, not raw scales
     ================================================================= */

  /* Surfaces */
  --surface-page: var(--linen-400);
  --surface-card: var(--white);
  --surface-raised: var(--paper-100);
  --surface-sand: var(--sand-400);
  --surface-inverse: var(--teal-800);
  --surface-accent: var(--cyan-500);

  /* Text */
  --text-strong: var(--teal-800);
  --text-body: var(--grey-800);
  --text-muted: var(--grey-600);
  --text-subtle: var(--grey-500);
  --text-on-dark: var(--linen-400);
  --text-on-accent: var(--teal-800);
  --text-link: var(--cyan-700);

  /* Borders */
  --border-subtle: var(--mist-400);
  --border-strong: var(--grey-400);
  --border-accent: var(--cyan-500);
  --border-inverse: var(--teal-700);

  /* Interactive / brand */
  --brand: var(--teal-800);
  --brand-accent: var(--cyan-500);
  --focus-ring: var(--cyan-500);

  /* Sectiekop ("eyebrow"): 11px/800 uppercase. Bewust NIET --brand-accent (cyan-500):
     dat haalt 2,1:1 op wit en is op die maat feitelijk onleesbaar. Cyaan blijft het
     grafische accent (streepje, onderlijn, actief vlak); de kop zelf is teal. */
  --text-eyebrow: var(--teal-500);

  /* Alleen-lezen (rol Viewer): een inert veld mag niet LIJKEN op een kapot veld, dus
     geen opacity — de tekst blijft op volle sterkte, alleen het vlak en de rand zakken. */
  --surface-readonly: var(--paper-100);
  --border-readonly: var(--mist-400);
}