/* ============================================================
   EWE · Colors
   Brand palette extracted from the EWE Figma foundations.
   Grau-Gelb (grey + yellow) is the core brand perception;
   secondary hues are used as accents ("Störer") only.
   ============================================================ */

:root {
  /* ---- Primärfarben : EWE Gelb (yellow) ---- */
  --ewe-gelb-100: #FFF9E0;
  --ewe-gelb-200: #FFF3B2;   /* hover (light) */
  --ewe-gelb-300: #FFE680;
  --ewe-gelb-400: #FFDB4D;
  --ewe-gelb-500: #FFD700;   /* BASE — EWE Gelb */
  --ewe-gelb-600: #F5D000;   /* pressed / active */
  --ewe-gelb-700: #E0BF00;
  --ewe-gelb-800: #CCAD00;
  --ewe-gelb-900: #B89C00;
  --ewe-gelb-hover: #FFED85; /* button hover wash */
  --ewe-gelb-dot:   #FFE75C; /* signature "Störer" dot */

  /* ---- Primärfarben : EWE Grau (grey) ---- */
  --ewe-grau-100: #EDEEEE;   /* disabled background */
  --ewe-grau-200: #BDBFBF;   /* disabled font */
  --ewe-grau-300: #9C9F9F;
  --ewe-grau-350: #9FA5A5;   /* input border (hover) */
  --ewe-grau-400: #7B7F7F;   /* hover */
  --ewe-grau-500: #393E41;   /* BASE — EWE Grau */
  --ewe-grau-700: #272B2E;
  --ewe-grau-800: #1D2022;
  --ewe-grau-900: #131516;

  /* ---- Neutrals ---- */
  --ewe-white: #FFFFFF;
  --ewe-black: #000000;
  --ewe-grey-bg: #F5F5F5;

  /* ---- Sekundärfarben (accents) — signalstark / harmonisch / dark ---- */
  --ewe-blau-harmonisch:  #98CEEB;
  --ewe-blau-100:         #E6F1FC;   /* light tint — notice background */
  --ewe-blau:             #0773DC;   /* signalstark */
  --ewe-blau-900:         #022449;

  --ewe-tuerkis-harmonisch: #6CC4C8;
  --ewe-tuerkis:            #008580;  /* signalstark */
  --ewe-tuerkis-900:        #002625;

  --ewe-gruen-harmonisch: #7FD0A3;
  --ewe-gruen-100:        #E6F6EE;   /* light tint — success background */
  --ewe-gruen:            #008748;   /* signalstark / success */
  --ewe-gruen-900:        #002817;

  --ewe-rot-harmonisch: #F5AAA9;
  --ewe-rot-100:        #FCEAEC;     /* light tint — error background */
  --ewe-rot:            #DB2D41;     /* signalstark */
  --ewe-rot-700:        #C21E2C;     /* error border */
  --ewe-rot-900:        #3E0C12;

  --ewe-orange-harmonisch: #FFC27A;
  --ewe-orange-100:        #FCEDE6;  /* light tint — warning background */
  --ewe-orange:            #D7410A;  /* signalstark */
  --ewe-orange-900:        #421302;

  --ewe-violett-200: #C1B7DB;
  --ewe-violett-300: #A79CE4;
  --ewe-violett-400: #8E7EDD;
  --ewe-violett-500: #7767D0;        /* signalstark */
  --ewe-violett-600: #6356B6;
  --ewe-violett-700: #4E4396;
  --ewe-violett-800: #38306F;
  --ewe-violett-900: #241F49;

  /* ---- Functional blues ---- */
  --ewe-focus: #3DA2D9;   /* focus ring */
  --ewe-info:  #2196F3;   /* informational notices */

  /* ============================================================
     Semantic aliases — use THESE in components
     ============================================================ */
  --brand:          var(--ewe-gelb-500);
  --brand-hover:    var(--ewe-gelb-hover);
  --brand-active:   var(--ewe-gelb-600);
  --brand-dot:      var(--ewe-gelb-dot);

  --surface-page:   var(--ewe-white);
  --surface-subtle: var(--ewe-grey-bg);
  --surface-muted:  var(--ewe-grau-100);
  --surface-card:   var(--ewe-white);
  --surface-dark:   var(--ewe-grau-500);
  --surface-darker: var(--ewe-grau-800);

  --text-strong:    var(--ewe-grau-500);
  --text-body:      var(--ewe-grau-500);  /* körniger Body-Ton #393E41 */
  --text-muted:     var(--ewe-grau-400);
  --text-subtle:    var(--ewe-grau-300);
  --text-disabled:  var(--ewe-grau-200);
  --text-on-dark:   var(--ewe-white);
  --text-on-brand:  var(--ewe-grau-500);
  --text-error:     var(--ewe-rot-700);   /* error/help text — overridden lighter in dark mode */

  --border-subtle:  var(--ewe-grau-100);
  --border-default: var(--ewe-grau-350);
  --border-strong:  var(--ewe-grau-500);

  --color-success:  var(--ewe-gruen);
  --color-error:    var(--ewe-rot);
  --color-warning:  var(--ewe-orange);
  --color-info:     var(--ewe-info);
  --color-focus:    var(--ewe-focus);

  --focus-ring: 0 0 0 2px var(--ewe-focus);
}