/* ============================================================
   Live – Design-Tokens im Design von Katja Michalek (ZWISCHEN.®)
   Quelle der Werte: Marketing-Cockpit/design-vorgabe/DESIGNVORGABE.md
   und Folienwerkstatt/_grundlage/km-design-html/tokens.json.
   Acht Farben, keine weiteren. Ecken 0, keine Schatten, keine
   Verläufe. Gelb ist Fläche und Marker, nie Textfarbe unter 40 px.
   Auf Gelb steht ausschließlich Anthrazit.

   Die Komponenten (live.css, regie.css, praesentation.css) greifen
   nur auf die Rollen-Variablen zu, nie auf die Marke direkt – so
   kippt die dunkle Bühne (<html data-theme="dark">) mit.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Marke (unveränderlich) ---- */
  --km-accent:      #FFEA2C;   /* Signalgelb: Marker, Linien, Füllungen, aktive Zustände */
  --km-ink:         #353535;   /* Anthrazit: Text, Primärknöpfe, dunkle Bühne */
  --km-muted:       #727271;   /* Grau – nur auf Weiß */
  --km-muted-paper: #63625F;   /* Grau – auf Papier */
  --km-muted-dark:  #C9C8C5;   /* Grau – auf Anthrazit */
  --km-paper:       #F5F4F1;   /* ruhige Flächen, Karten, Formulare */
  --km-line:        #E4E2DD;   /* Trennlinien, Rahmen */
  --km-bg:          #FFFFFF;
  --white:          #FFFFFF;
  --black:          #353535;   /* "Schwarz" ist in diesem Design immer Anthrazit */

  /* ---- Rollen: helle Bühne (Standard) ---- */
  --bg-0: #FFFFFF;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #F5F4F1;
  --bg-4: #E4E2DD;

  --text-100: #353535;
  --text-200: #353535;
  --text-300: #63625F;
  --text-400: #63625F;
  --text-500: #727271;
  --text-600: #727271;

  --border-subtle: #E4E2DD;
  --border-soft:   #E4E2DD;
  --border-strong: #353535;
  --border-active: #353535;
  --focus-ring:    #FFEA2C;    /* 2 px Gelb auf 1 px Anthrazit (DESIGNVORGABE §5.15) */

  /* Akzent als FLÄCHE (Marker, Füllung) – nie als Text unter 40 px */
  --accent:        #FFEA2C;
  --on-accent:     #353535;
  /* Akzent als TEXT: auf Hell Anthrazit, auf der dunklen Bühne Gelb (nur groß) */
  --signal-text:   #353535;
  --signal-big:    #353535;    /* Zahlen ab 40 px */

  /* Status: Farbe ist nie der einzige Bedeutungsträger (§9) – Text trägt die Bedeutung */
  --ok-text:     #353535;
  --warn-text:   #353535;
  --alert-text:  #353535;
  --status-green: #353535;
  --status-yellow: #FFEA2C;
  --status-red:   #353535;

  /* ---- Abstände (Rinne 16, Rand 48/20) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ---- Radius: die einzige Ecke ---- */
  --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;

  /* ---- Schatten und Glow: gibt es nicht ---- */
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --glow-lime: none; --glow-pink: none;

  /* ---- Schrift ---- */
  --font: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-display: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;       /* nur Zitate und große Zahlen */
  --font-wordmark: "Semplicita Wortmarke", "Source Sans 3", sans-serif;
  --mono: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; /* Codes und Kennungen: tabellarische Ziffern */

  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Bewegung: Aufsteigen, Marker zeichnen, Flächenwechsel ---- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  --think-pulse: 1.15s; --think-stagger: .16s; --think-cycle: 1.5s; --think-word-in: .3s;

  --container: 1200px;
  --reading: 900px;
}

/* ============================================================
   Dunkle Bühne (Abschnittstrenner-Folie, Overlay über Video):
   Anthrazit, Grau auf Anthrazit, Gelb bleibt Gelb – als Text nur groß.
   <html data-theme="dark"> bzw. Leinwand ?thema=dunkel.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #353535;
  --bg-1: #353535;
  --bg-2: #353535;
  --bg-3: #404040;
  --bg-4: #4A4A4A;

  --text-100: #FFFFFF;
  --text-200: #FFFFFF;
  --text-300: #C9C8C5;
  --text-400: #C9C8C5;
  --text-500: #C9C8C5;
  --text-600: #C9C8C5;

  --border-subtle: rgba(255,255,255,.14);
  --border-soft:   rgba(255,255,255,.18);
  --border-strong: #FFFFFF;
  --border-active: #FFEA2C;
  --focus-ring:    #FFEA2C;

  --signal-text:   #FFFFFF;
  --signal-big:    #FFEA2C;
  --white:         #FFFFFF;
  --black:         #353535;
  --ok-text: #FFFFFF; --warn-text: #FFEA2C; --alert-text: #FFFFFF;
  --status-green: #FFFFFF; --status-red: #FFFFFF;
}