/* WMS Colors — base palette + semantic aliases
 * Source: "WMS Farben.pdf", "WMS Website Styleguide.pdf", Grafische Identität, project instructions.
 * Web dark tone is Ink/Midnight #2A5789 (navy, Web); deepest ink #142433; Print is Night #2f4155. */

:root {
  /* ---- Primary (Web) ---- */
  --wms-turquoise: #26b4af;   /* WMS Türkis  */
  --wms-midnight:  #2a5789;   /* WMS Midnight (Web) — navy, harmonised with cloud blue */
  --wms-midnight-deep: #142433; /* deepest ink for max contrast / small text */
  --wms-night:     #2f4155;   /* WMS Night (Print) */
  --wms-yellow:    #ffc80b;   /* WMS Gelb (CTA / primary accent) */

  /* ---- Theme family (one per mascot / subject) ---- */
  --wms-finance:        #ffc80b;  /* Finanzen & Geld   — Gelb  */
  --wms-sustainability: #7fb85e;  /* Nachhaltigkeit    — Grün  */
  --wms-emotions:       #2384c6;  /* Emotionen & Konflikte — Blau */
  --wms-social:         #f5333d;  /* Soziales Handeln  — Rot (leicht gewärmt/angeglichen) */
  --wms-media:          #ee4993;  /* Medien & Konsum   — Pink  */

  /* ---- Neutrals / greys ---- */
  --wms-grey-1: #626a73;  /* Grau 1 (60%) */
  --wms-grey-2: #83898f;  /* Grau 2 (40%) */
  --wms-grey-3: #c4c8cc;  /* Grau 3 (20%) */
  --wms-grey-4: #ededf2;  /* Grau 4 (10%) — light surface */
  --wms-white:  #ffffff;
  --wms-black:  #1c2530;  /* near-black, derived from midnight */

  /* ---- Status / UI-state colors (NOT theme colors) ----
     Deliberately distinct from the five theme colors so a form error never
     reads as "Thema Soziales". Theme red #f5333d / green #7fb85e are reserved. */
  --wms-error:   #b3261e;  /* deep brick red — clearly darker than Soziales #f5333d */
  --wms-error-bg:#fbeceb;
  --wms-ok:      #2e7d32;  /* deep green — clearly darker than Nachhaltigkeit #7fb85e */
  --wms-ok-bg:   #eaf3ea;

  /* ---- Tinted backgrounds ---- */
  --wms-yellow-bg:    #fff7e9;  /* Gelb hell — warm page wash */
  --wms-turquoise-bg: #e4f5f4;  /* turquoise 10% wash (derived) */

  /* ---- Brand gradients (Website "Sekundärfarben Web") ---- */
  --wms-gradient-turquoise: linear-gradient(180deg, #26b4af 0%, #ffffff 100%); /* @kind color */
  --wms-gradient-green:     linear-gradient(180deg, #7fb85e 0%, #ffffff 100%); /* @kind color */
  /* Mascot-family rainbow sweep (compass / magazine spine) */
  --wms-gradient-rainbow: linear-gradient(90deg, #7fb85e 0%, #26b4af 22%, #2384c6 44%, #ee4993 68%, #f5333d 84%, #ffc80b 100%); /* @kind color */
  /* Softer, pastel rainbow — for larger fills / backgrounds (the vivid one is Signet/Kompass only) */
  --wms-gradient-rainbow-soft: linear-gradient(90deg, #d3e8c4 0%, #c3e8e6 22%, #c2dbef 44%, #f8d3e3 68%, #f8c8cc 84%, #fff0bd 100%); /* @kind color */

  /* =========================================================
     Semantic aliases — reference these in components
     ========================================================= */
  --color-bg:            var(--wms-white);
  --color-bg-warm:       var(--wms-yellow-bg);
  --color-surface:       var(--wms-white);
  --color-surface-muted: var(--wms-grey-4);

  --color-text:          var(--wms-midnight);
  --color-text-muted:    var(--wms-grey-1);
  --color-text-subtle:   var(--wms-grey-2);
  --color-text-inverse:  var(--wms-white);
  --color-text-on-yellow:var(--wms-midnight);

  --color-primary:       var(--wms-turquoise);
  --color-accent:        var(--wms-yellow);   /* CTA */
  --color-ink:           var(--wms-midnight);

  --color-border:        var(--wms-grey-3);
  --color-border-strong: var(--wms-midnight);
  --color-divider:       var(--wms-grey-4);

  --color-link:          var(--wms-turquoise);
  --color-focus-ring:    var(--wms-turquoise);

  /* Status roles — use these for validation/feedback, never a theme color */
  --color-error:         var(--wms-error);
  --color-error-surface: var(--wms-error-bg);
  --color-success:       var(--wms-ok);
  --color-success-surface: var(--wms-ok-bg);
}