/* ============================================================
   Color tokens
   Source of truth: DESIGN.md §3 + tokens.js (Styleguide 2026)
   Nachtblau is the stage; colour follows function (audience).
   ============================================================ */
:root {
  /* ---- Primary palette ---- */
  --xem-night-blue: #1A1E52;  /* Nachtblau · base stage, text, bg */
  --xem-ocean-blue: #00569D;  /* Fernblau · Arbeitgeber / Produkt */
  --xem-sky-blue:   #35A4D9;  /* Himmelblau · Vermittler · Links · CTA */
  --xem-teal:       #52BBB5;  /* Türkisblau · Arbeitnehmer · Akzent */
  --xem-olive:      #B3C45B;  /* Olivgrün · Versicherer · Highlight */
  --xem-white:      #FFFFFF;

  /* ---- Secondary palette (max. 1 per layout, very sparing) ---- */
  --xem-bordeaux: #931F53;
  --xem-orange:   #D98028;  /* also: warning */
  --xem-ocker:    #D9B024;

  /* ---- Surface / dark-mode (slides & dark pages) ---- */
  --xem-bg-dark:    #1A1E52;  /* page / slide background */
  --xem-bg-dark-2:  #111B45;  /* deeper layer */
  --xem-bg-card:    #192352;  /* cards on dark */
  --xem-accent-cyan:#1BBDE8;  /* electric accent */
  --xem-text-light: #C8D8F0;  /* body text on dark */

  /* ---- Neutrals ---- */
  --xem-gray-100: #F5F6FA;
  --xem-gray-200: #E8EAF2;
  --xem-gray-400: #9099BF;
  --xem-gray-600: #5A6080;

  /* ---- Audience → colour logic ---- */
  --xem-aud-arbeitnehmer: var(--xem-teal);    /* Arbeitnehmer-Portal */
  --xem-aud-vermittler:   var(--xem-sky-blue); /* Vermittler-Portal */
  --xem-aud-arbeitgeber:  var(--xem-ocean-blue); /* Arbeitgeber-Portal */
  --xem-aud-versicherer:  var(--xem-olive);    /* Versicherer-Portal */

  /* ---- Brand gradient — ONLY for single keywords / fine accent lines, never as a fill ---- */
  --xem-gradient: linear-gradient(90deg, #B3C45B 0%, #35A4D9 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — light surfaces (default)
     ============================================================ */
  --surface-page:    var(--xem-white);
  --surface-subtle:  var(--xem-gray-100);
  --surface-card:    var(--xem-white);
  --surface-border:  var(--xem-gray-200);

  --text-strong:     var(--xem-night-blue);
  --text-body:       #3A4068;          /* slightly lifted night-blue for body on light */
  --text-muted:      var(--xem-gray-600);
  --text-on-accent:  var(--xem-white);

  --link:            var(--xem-sky-blue);
  --link-hover:      #2A8FC2;

  --accent:          var(--xem-sky-blue);  /* default interactive accent / CTA */
  --accent-hover:    #2A8FC2;
  --focus-ring:      rgba(53,164,217,.45);

  --success: var(--xem-teal);
  --warning: var(--xem-orange);
  --danger:  var(--xem-bordeaux);
}

/* ============================================================
   Dark stage — apply to a slide / dark page / hero section.
   Add class="xem-dark" (or data-theme="dark") on the container.
   ============================================================ */
.xem-dark,
[data-theme="dark"] {
  --surface-page:    var(--xem-bg-dark);
  --surface-subtle:  var(--xem-bg-dark-2);
  --surface-card:    var(--xem-bg-card);
  --surface-border:  rgba(200,216,240,.14);

  --text-strong:     var(--xem-white);
  --text-body:       var(--xem-text-light);
  --text-muted:      var(--xem-gray-400);
  --text-on-accent:  var(--xem-white);

  --link:            var(--xem-accent-cyan);
  --link-hover:      #5fd0f0;

  --accent:          var(--xem-sky-blue);
  --accent-hover:    #5bbfe8;
  --focus-ring:      rgba(27,189,232,.5);
}