/* ============================================================
   Zakelijk Inleven — Color tokens
   Hoofdkleuren + ODC vier-kleuren talentsysteem + neutralen
   ============================================================ */

:root {
  /* --- Brand core (huisstijl) --- */
  --zi-orange: #ff6a00;   /* Primair accent  */
  --zi-yellow: #ffc643;   /* Secundair accent */
  --zi-teal:   #429ebd;   /* Tertiair accent  */
  --zi-navy:   #21355a;   /* Tekst + donkere achtergrond */
  --zi-light:  #faf9f5;   /* Lichte achtergrond / tekst op donker */

  /* --- Orange ramp (warm, photographic brand) --- */
  --orange-700: #c24f00;
  --orange-600: #e85f00;
  --orange-500: #ff6a00;
  --orange-300: #ffa15a;
  --orange-100: #ffe4cf;
  --orange-50:  #fff4ea;

  /* --- Yellow ramp --- */
  --yellow-500: #ffc643;
  --yellow-300: #ffd877;
  --yellow-100: #fff0c9;

  /* --- Teal ramp --- */
  --teal-700: #266781;
  --teal-600: #2f7e98;
  --teal-500: #429ebd;
  --teal-300: #84c1d5;
  --teal-100: #dceef4;

  /* --- Navy ramp --- */
  --navy-900: #16243d;
  --navy-700: #21355a;
  --navy-500: #3a4f74;
  --navy-300: #6b7a96;
  --navy-100: #c3cbd9;

  /* --- ODC talent quadrant (Odin Development Compass) --- */
  --odc-green:  #4ca85a;  /* Natuurlijke kracht — benutten   */
  --odc-orange: #ef8c2c;  /* Onbenut potentieel — activeren  */
  --odc-blue:   #3a86bf;  /* Aangeleerd / risico — doseren   */
  --odc-grey:   #8b8e97;  /* Past niet — accepteren          */
  --odc-canvas: #0b54a3;  /* Royal-blue veld waarop ODC staat */

  /* --- Warm neutrals --- */
  --paper:      #faf9f5;  /* page background        */
  --surface:    #ffffff;  /* card surface           */
  --surface-2:  #f4f1ea;  /* sunken / alt surface   */
  --line:       #e7e2d6;  /* hairline border        */
  --line-strong:#d6cfbf;

  /* --- Semantic aliases --- */
  --bg-page:        var(--paper);
  --bg-dark:        var(--navy-700);
  --surface-card:   var(--surface);
  --surface-sunken: var(--surface-2);

  --text-strong:  var(--navy-700);
  --text-body:    #3b4a63;
  --text-muted:   #6b7488;
  --text-on-dark: var(--zi-light);
  --text-on-dark-muted: #b6c0d2;

  --accent:        var(--zi-orange);
  --accent-hover:  var(--orange-600);
  --accent-press:  var(--orange-700);
  --accent-soft:   var(--orange-50);

  --border:        var(--line);
  --border-strong: var(--line-strong);
  --focus-ring:    color-mix(in srgb, var(--zi-orange) 55%, white);
}