/*
 * tokens.css — Design-Tokens für die foodcoop-Web-App
 * Typomeister-Design-System, Light-Default im Papierton.
 *
 * Werte-Herkunft (siehe Kommentare je Token):
 *  - "PHP"       = wörtlich übernommen aus
 *                  C:\Allerlei\backups\typomeister-migration-2026-03-25\_typomeister-tokens.php
 *                  (Cormorant Garamond + Source Sans 3, Kupfer-Gold #C67A3C,
 *                  Modular Scale 1.25, 8px-Spacing).
 *  - "abgeleitet" = die PHP-Quelle kennt nur EINE Hintergrundfläche (--ms-light)
 *                  und EINEN Fire-Ton (--ms-gold/--ms-gold-hover). Die hier
 *                  verlangten Token-NAMEN (--color-bg-surface/-elevated/-selected,
 *                  --color-fire-bright/-deep/-ember) brauchen eine 3–4-stufige
 *                  Skala; diese Zwischenwerte sind rechnerisch aus dem PHP-Basiston
 *                  interpoliert (Mischung Richtung Weiß/Schwarz), NICHT frei erfunden.
 *  - "ideas-app" = Radius-Skala und Font-Gewichte fehlen in der PHP-Quelle komplett;
 *                  hier 1:1 übernommen aus dem Schwester-Design-System
 *                  C:\Allerlei\ideas-app\design\mockup\tokens.css (gleiche
 *                  Typomeister-Familie, dort als Dark-Variante geführt).
 *
 * Token-Namenskonvention (--color-bg-base/-surface/-elevated/-selected, --color-fire …)
 * ist die des ideas-app-Schwestersystems; die WERTE hier sind eigenständig für
 * Light/Papierton berechnet, nicht 1:1 aus ideas-app kopiert (das ist Dark).
 */

:root {
  /* ============================================================
     Flächen (hell → Papierton als Basis, Karten heller/weißer)
     ============================================================ */
  --color-bg-base: #f5f3ef; /* PHP --ms-light — Papierton, App-Grund */
  --color-bg-surface: #ffffff; /* PHP --ms-white — Karten/Listen-Rows auf Papier */
  --color-bg-elevated: #faf8f4; /* abgeleitet — zwischen base und surface (Player-Bar, Eingaben, Menüs) */
  --color-bg-selected: #f0e4d4; /* abgeleitet — Kupfer-Tint auf Papier (aktiver/gedrückter Zustand) */
  --color-border: #e3ddd2; /* abgeleitet — helle warme Trennlinie */
  --color-border-strong: #cec4b2; /* abgeleitet — betonte Trennung */

  /* ============================================================
     Text (PHP-Hierarchie direkt übernommen, dunkel auf hell)
     ============================================================ */
  --color-text-primary: #2a2a2a; /* PHP --ms-text */
  --color-text-secondary: #45433f; /* abgeleitet — zwischen text-primary und text-muted */
  --color-text-muted: #666666; /* PHP --ms-text-light */
  --color-text-faint: #8a8680; /* abgeleitet — heller als muted (Labels, Platzhalter) */

  /* ============================================================
     Feuer: Akzent (Esse-Glut, Kupfer-Gold — PHP-Kernfarbe)
     ============================================================ */
  --color-fire: #c67a3c; /* PHP --ms-gold — Primär-Akzent / CTA */
  --color-fire-bright: #d99a5c; /* abgeleitet — hellere Glut (Hover-Glow) */
  --color-fire-deep: #a86330; /* PHP --ms-gold-hover — gedrückter Zustand */
  --color-fire-ember: #8b5427; /* abgeleitet — tiefe Glut, dezente Verläufe */
  --color-on-fire: #ffffff; /* PHP-Konvention: CTA-Text weiß auf Kupfer-Gold */
  --color-fire-tint: rgba(198, 122, 60, 0.12); /* abgeleitet — Fläche hinter Akzent */

  /* Zusatzfarbe aus der PHP-Quelle (Braun-Rot, dort als Akzent geführt) */
  --color-accent-red: #8b2d1a; /* PHP --ms-red */

  /* ============================================================
     Typografie: Familien (PHP wörtlich)
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif;

  /* Font-Gewichte — ideas-app (in PHP nicht als Custom Properties geführt) */
  --weight-display: 400;
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-body-medium: 600;
  --weight-body-bold: 700;

  /* ============================================================
     Typografie: Modular Scale 1.25 (Major Third) — PHP wörtlich,
     nur --step-sm → --step--1 umbenannt (Namenskonvention ideas-app)
     ============================================================ */
  --step--1: clamp(0.8rem, 0.77rem + 0.17vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.19rem + 0.28vw, 1.41rem);
  --step-2: clamp(1.56rem, 1.48rem + 0.42vw, 1.76rem);
  --step-3: clamp(1.95rem, 1.84rem + 0.58vw, 2.2rem);
  --step-4: clamp(2.44rem, 2.28rem + 0.79vw, 2.75rem);
  --step-5: clamp(3.05rem, 2.84rem + 1.07vw, 3.43rem);

  /* ============================================================
     Abstände: 8px-Raster — PHP wörtlich (--space-s/-m/-l → -sm/-md/-lg
     umbenannt, Namenskonvention ideas-app; Werte identisch)
     ============================================================ */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */

  /* Measure — PHP wörtlich */
  --measure: 65ch;

  /* ============================================================
     Radien — PHP kennt keine Radius-Skala, 1:1 aus ideas-app
     ============================================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ============================================================
     9 Familienfarben (gedeckt, OLED-/Papier-tauglich)
     Familie 1–6: aus dem Eingebungen-Mockup übernommen
       (Fundort: c:\Allerlei\ideas-app\design\mockup\sitzungen.html,
       dort als --speaker-1 … --speaker-6 geführt).
     Familie 7–9: Eigenwahl — ergänzt, damit die Palette zum
       Kupfer/Papier-System passt (gedeckt, gleiche Sättigung/Helligkeit
       wie 1–6, aber farblich klar von ihnen unterscheidbar).
     ============================================================ */
  --familie-1: #c67a3c; /* Kupfer — Mockup --speaker-1 */
  --familie-2: #5a7a8c; /* Stahlblau — Mockup --speaker-2 */
  --familie-3: #7c8f5e; /* Moosgrün — Mockup --speaker-3 */
  --familie-4: #a05c4a; /* Terrakotta — Mockup --speaker-4 */
  --familie-5: #b09a5a; /* Messing — Mockup --speaker-5 */
  --familie-6: #8a7f9e; /* Nebelviolett — Mockup --speaker-6 */
  --familie-7: #6f8f7a; /* Salbeigrün — Eigenwahl */
  --familie-8: #9c7a54; /* Bronzebraun — Eigenwahl */
  --familie-9: #5c6b7a; /* Schiefergrau-Blau — Eigenwahl */

  /* ============================================================
     Foodcoop-Produktschicht v3
     Semantische Markenfarben und kompatible Aliasnamen. Die Aliasnamen
     schließen die bisherige Lücke zwischen -s/-m/-l und -sm/-md/-lg;
     ohne sie verwarf der Browser mehrere Abstands- und Radiusregeln.
     ============================================================ */
  --color-brand: #173d2f;
  --color-brand-deep: #0f2c22;
  --color-brand-soft: #dfe9dc;
  --color-sage: #91ad83;
  --color-cream: #f4f0e7;
  --color-cream-deep: #e9e1d3;
  --color-terracotta: #d9824b;
  --color-warning: #9d6b2f;
  --color-success: #3d694c;
  --shadow-sm: 0 8px 24px rgb(29 48 38 / 8%);
  --shadow-md: 0 20px 60px rgb(29 48 38 / 13%);
  --shadow-lg: 0 34px 90px rgb(20 45 34 / 20%);

  --space-s: var(--space-sm);
  --space-m: var(--space-md);
  --space-l: var(--space-lg);
  --radius-m: var(--radius-md);
  --radius-l: var(--radius-lg);
}

/* ================================================================
   Dark-Modus später: Werte-Tausch
   Quelle: C:\Allerlei\ideas-app\design\mockup\tokens.css (Dark-Variante
   desselben Typomeister-Systems, Stand Slice S1.1). Bei Aktivierung
   Werte in :root tauschen (oder [data-theme="dark"]-Scope anlegen) —
   NICHT einfach invertieren, die Fire-Stufen sind bewusst anders gestaffelt.

:root {
  --color-bg-base: #141518;
  --color-bg-surface: #1c1e22;
  --color-bg-elevated: #24272c;
  --color-bg-selected: #2c3037;
  --color-border: #33373e;
  --color-border-strong: #454a52;

  --color-text-primary: #f2eee7;
  --color-text-secondary: #b9bcc2;
  --color-text-muted: #85888f;
  --color-text-faint: #5c5f66;

  --color-fire: #c67a3c;
  --color-fire-bright: #e39a54;
  --color-fire-deep: #9a5a28;
  --color-fire-ember: #7a3b1e;
  --color-on-fire: #ffffff;
  --color-fire-tint: rgba(198, 122, 60, 0.12);
}
   ================================================================ */