/* CXA-Baukasten · tokens.css
   Alle Farben, Schriften und Masse. Ein Kundenprojekt ueberschreibt nur diese
   Variablen in seiner eigenen theme.css, nie die Komponenten-Dateien.
   Standard ist das CXA-Design (Navy, Orange, Petrol, Inter). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/Inter-400800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/Inter-400800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marke: Hauptaktionen, aktive Zustaende */
  --cxa-marke:          #1a365d;
  --cxa-marke-dunkel:   #0a1f3d;
  --cxa-marke-hell:     #e6ecf4;
  --cxa-auf-marke:      #ffffff;

  /* Akzent: Hervorhebung, Markierungsstrich, Zaehler */
  --cxa-akzent:         #ff7f50;
  --cxa-akzent-dunkel:  #c95128;
  --cxa-akzent-hell:    #ffeee6;

  /* Flaechen und Linien */
  --cxa-grund:          #f2f3f5;
  --cxa-flaeche:        #ffffff;
  --cxa-flaeche-2:      #e9ecf0;
  --cxa-linie:          rgba(16, 28, 45, .13);
  --cxa-linie-zart:     rgba(16, 28, 45, .065);

  /* Schrift */
  --cxa-text:           #121a26;
  --cxa-text-2:         #4a5567;
  --cxa-text-3:         #667186;  /* noch 4,5:1 auf Weiss, nicht heller machen */

  /* Navigationsschiene */
  --cxa-schiene:        #0a1f3d;
  --cxa-schiene-2:      #14305a;
  --cxa-schiene-text:   #b9c6da;
  --cxa-schiene-aktiv:  #ffffff;

  /* Zustaende. Die -text-Variante ist der lesbare Ton auf der -hell-Flaeche. */
  --cxa-ok:             #2f7d5c;  --cxa-ok-hell:     #dcefe5;  --cxa-ok-text:     #1f5d43;
  --cxa-warn:           #c27a1a;  --cxa-warn-hell:   #f9ead3;  --cxa-warn-text:   #85500c;
  --cxa-fehler:         #c3362b;  --cxa-fehler-hell: #fbe1de;  --cxa-fehler-text: #93241b;
  --cxa-info:           #008080;  --cxa-info-hell:   #d6eeee;  --cxa-info-text:   #005c5c;

  /* Typografie */
  --cxa-schrift:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cxa-schrift-titel:  var(--cxa-schrift);
  --cxa-mono:           ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --cxa-t-mikro:        10.5px;
  --cxa-t-klein:        12.5px;
  --cxa-t-basis:        14px;
  --cxa-t-gross:        16px;
  --cxa-t-titel:        21px;
  --cxa-t-zahl:         28px;

  /* Raster */
  --cxa-schiene-breit:  236px;
  --cxa-schiene-eng:    68px;
  --cxa-kopf-hoehe:     62px;
  --cxa-zeile:          42px;
  --cxa-abstand:        20px;
  --cxa-radius:         5px;
  --cxa-radius-gr:      9px;

  /* Tiefe */
  --cxa-schatten:       0 1px 2px rgba(16, 28, 45, .06), 0 3px 12px rgba(16, 28, 45, .05);
  --cxa-schatten-2:     0 4px 10px rgba(16, 28, 45, .10), 0 14px 40px rgba(16, 28, 45, .12);
  --cxa-schatten-3:     0 24px 64px rgba(10, 20, 35, .28);

  --cxa-tempo:          160ms cubic-bezier(.2, .7, .3, 1);
}