/* CORA Design System – Tokens
   Stand 2026-11-13, v1.2: Website hell mit violetten Bändern (Entscheid Jannik, 13.11.2026). Quelle: Webflow-Site cora.one (CSS-Variablen --cora-*),
   Interim-Logo Lila, Broschüre L05 (2024), LinkedIn-Assets.
   Schriften liegen in assets/fonts (Arizona: Dinamo-Lizenz, siehe DINAMO-EULA.pdf). */

@font-face { font-family: "Arizona Text"; src: url("assets/fonts/ABCArizonaText-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arizona Flare"; src: url("assets/fonts/ABCArizonaFlare-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("assets/fonts/SourceCodePro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* Lila – Markenfarbe (Logo, Akzente auf Dunkel) */
  --cora-lila-50:  #f4f5fb;
  --cora-lila-100: #e3e6f5;   /* website: --cora-primary-light */
  --cora-lila-300: #d0d4eb;
  --cora-lila-400: #c1c6e4;
  --cora-lila-500: #b7bcda;   /* website: --cora-primary, Logo #b6bede */
  --cora-lila-600: #a0a7ce;   /* website: --cora-primary-dark */

  /* Violett – kräftiger Akzent (LinkedIn, Social) */
  --cora-violet-500: #4434ac;
  --cora-violet-600: #3c2ca8;
  --cora-violet-700: #2e2380;  /* Footer, Hover auf Violett-Band */

  /* Schiefer – Sekundärfarbe, Text auf Hell */
  --cora-slate-400: #525568;  /* --cora-secondary-light */
  --cora-slate-500: #434655;  /* --cora-secondary */
  --cora-slate-600: #3d404e;  /* --cora-secondary-dark */
  --cora-slate-700: #2b2d37;  /* --cora-secondary-darkest */

  /* Neutral */
  --cora-ink-900: #121212;    /* bis v1.1 Website-Hintergrund; jetzt Überschriften auf Hell, dunkle Folien */
  --cora-ink-800: #171717;    /* --cora-background-02 */
  --cora-paper:   #ffffff;
  --cora-mist:    #f5f7fa;
  --cora-grey-400:#98a2b3;
  --cora-grey-600:#667085;

  /* Schrift */
  --cora-font-display: "Arizona Flare", "Arizona Text", "Times New Roman", serif;
  --cora-font-title:   "Arizona Text", "Times New Roman", serif;
  --cora-font-text:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cora-font-mono:    "Source Code Pro", ui-monospace, Menlo, monospace;

  /* Schriftgrössen (Desktop; mobil Display/H1 eine Stufe kleiner) */
  --cora-size-display: 4.5rem;
  --cora-size-h1: 3rem;
  --cora-size-h2: 2.125rem;
  --cora-size-h3: 1.5rem;
  --cora-size-lead: 1.25rem;
  --cora-size-body: 1rem;
  --cora-size-small: 0.875rem;
  --cora-size-label: 0.75rem;
  --cora-line-body: 1.5;           /* website: --text-height 24px bei 16px */
  --cora-tracking-body: 0.025em;   /* website: --text-spacing .4px */
  --cora-tracking-label: 0.12em;

  /* Abstände (8er-Raster) und Seitenränder der Website */
  --cora-space-1: 4px;  --cora-space-2: 8px;  --cora-space-3: 16px;
  --cora-space-4: 24px; --cora-space-5: 32px; --cora-space-6: 48px;
  --cora-space-7: 64px; --cora-space-8: 96px;
  --cora-side-mobile: 24px;
  --cora-side-small: 4rem;
  --cora-side-medium: 8rem;
  --cora-side-large: 12rem;

  /* Form */
  --cora-radius-0: 0;        /* Standard: CORA ist kantig, editorial */
  --cora-radius-pill: 999px; /* nur für Tags */
  --cora-rule: 1px solid currentColor;

  /* Diagramme (v1.3, 13.11.2026, Entscheid Jannik: «Violett und Grau», nicht bunt).
     Violett für das Wichtige, die anderen Reihen in Schiefer und Grau. Reihenfolge fest.
     Nur für Daten, nie für Text. */
  --cora-chart-1-light: #4434ac;  /* Violett (Marke) */
  --cora-chart-2-light: #434655;  /* Schiefer */
  --cora-chart-3-light: #8b8fa3;  /* Grau mittel */
  --cora-chart-4-light: #c9cdd6;  /* Grau hell */
  --cora-chart-1-dark:  #b7bcda;  /* Lila */
  --cora-chart-2-dark:  #ffffff;
  --cora-chart-3-dark:  #8b8fa3;
  --cora-chart-4-dark:  #5c5f70;
  --cora-chart-muted-light: #c9cdd6; /* «alle anderen» beim Hervorheben */
  --cora-chart-muted-dark:  #3d404e;
  --cora-chart-grid-light:  #e6e8ee;
  --cora-chart-grid-dark:   #2b2d37;

  /* Rollen (v1.2). Website und Bildschirm: heller Grund, Violett als breites Band.
     Bänder nur für Einstieg (Hero), Spendenaufruf, Kontakt/Newsletter und Footer,
     höchstens ein Band pro Bildschirmhöhe; lange Texte immer auf Hell. */
  --cora-bg:          var(--cora-paper);      /* Seitengrund */
  --cora-surface:     var(--cora-lila-50);    /* zweite Fläche, Karten, Abschnittswechsel */
  --cora-heading:     var(--cora-ink-900);    /* Titel auf Hell, 18,7 : 1 */
  --cora-text:        var(--cora-slate-500);  /* Fliesstext auf Hell, 9,4 : 1 */
  --cora-text-muted:  var(--cora-slate-400);  /* Sekundärtext auf Hell, 7,3 : 1 */
  --cora-accent:      var(--cora-violet-500); /* Links, Labels, Buttons auf Hell, 9,0 : 1 */
  --cora-line:        var(--cora-lila-100);   /* Trennlinien auf Hell */
  --cora-band:        var(--cora-violet-500); /* Violett-Band wie Broschüre */
  --cora-band-text:   var(--cora-lila-100);   /* Text auf Band, 7,2 : 1 */
  --cora-band-heading:var(--cora-paper);      /* Titel auf Band, 9,0 : 1 */
  --cora-band-accent: var(--cora-lila-500);   /* Logo, Button auf Band, 4,8 : 1 */
  --cora-footer:      var(--cora-violet-700);
}