/* Gemeinsame Tokenquelle (CI 1.3): public/brand.css. Sie kommt in die unterste
   Ebene „marke“, damit ihre allgemeinen Regeln (h1, body …) die neue Oberfläche
   nicht überschreiben; alle Farbwerte stehen dort (--farbe-*, --neu-*). */
@layer marke, tokens, basis, geruest, bausteine, seiten, hilfen;
@import url("/brand.css") layer(marke);

/* OpenZoe Dashboard v2 · 00-tokens.css
   Einzige Quelle für Farben, Abstände, Schrift, Bewegung. Werte aus CI 1.3
   (public/brand.css) und Zielbild 07, erweitert um Dichte, Ebenen und Bewegung.
   Hell/Dunkel über light-dark(); data-theme="light|dark" am <html> erzwingt eine Seite.
   Dichte über data-dichte="kompakt" am <html>. */

@font-face { font-family: Inter; src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('../assets/fonts/InterDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }


@layer tokens {
  :root {
    color-scheme: light dark;

    /* Flächen (von hinten nach vorn) */
    --f-grund:          var(--neu-f-grund);
    --f-leiste:         var(--neu-f-leiste);
    --f-flaeche:        var(--neu-f-flaeche);
    --f-flaeche-2:      var(--neu-f-flaeche-2);
    --f-flaeche-hover:  var(--neu-f-flaeche-hover);
    --f-auswahl:        var(--neu-f-auswahl);

    /* Text */
    --t-haupt:          var(--neu-t-haupt);
    --t-zweit:          var(--neu-t-zweit);
    --t-leise:          var(--neu-t-leise);

    /* Aktion */
    --aktion:           var(--neu-aktion);
    --aktion-hover:     var(--neu-aktion-hover);
    --auf-aktion:       var(--neu-auf-aktion);
    --aktion-flaeche:   var(--neu-aktion-flaeche);
    --akzent:           var(--neu-akzent);  /* nie als Text */

    /* Status — immer mit Symbol und Wort, nie nur Farbe */
    --ok:               var(--neu-ok);
    --ok-flaeche:       var(--neu-ok-flaeche);
    --warn:             var(--neu-warn);
    --warn-flaeche:     var(--neu-warn-flaeche);
    --fehler:           var(--neu-fehler);
    --fehler-flaeche:   var(--neu-fehler-flaeche);
    --auf-gefahr:       var(--neu-auf-gefahr);
    --info:             var(--neu-info);
    --info-flaeche:     var(--neu-info-flaeche);
    --lila:             var(--neu-lila);
    --lila-flaeche:     var(--neu-lila-flaeche);

    /* Linien */
    --linie:            var(--neu-linie);
    --linie-stark:      var(--neu-linie-stark);
    --rahmen-bedienung: var(--neu-rahmen-bedienung);  /* >= 3:1 */
    --fokus:            var(--neu-fokus);

    /* Schatten, Schleier, Glas */
    --schatten-farbe:   var(--neu-schatten-farbe);
    --schatten-1: 0 1px 2px var(--schatten-farbe);
    --schatten-2: 0 1px 2px var(--schatten-farbe), 0 6px 20px var(--schatten-farbe);
    --schatten-3: 0 2px 6px var(--schatten-farbe), 0 24px 64px var(--schatten-farbe);
    --schleier:         var(--neu-schleier);
    --glas:             var(--neu-glas);

    /* Diagramme (kategorisch, in beiden Modi geprüft) */
    --d-1: var(--neu-d-1);
    --d-2: var(--neu-d-2);
    --d-3: var(--neu-d-3);
    --d-4: var(--neu-d-4);
    --d-5: var(--neu-d-5);
    --d-raster: var(--neu-d-raster);

    /* Abstände (4er-Raster) */
    --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px;
    --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --a-16: 64px;

    /* Schrift */
    --schrift: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-titel: "Inter Display", Inter, system-ui, sans-serif;
    --schrift-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --gr-xs: 0.75rem;    /* 12 */
    --gr-s: 0.8125rem;   /* 13 */
    --gr-m: 0.875rem;    /* 14 — Grundgröße der Oberfläche */
    --gr-l: 1rem;        /* 16 */
    --gr-xl: 1.25rem;    /* 20 */
    --gr-2xl: 1.625rem;  /* 26 */
    --gr-3xl: 2.125rem;  /* 34 */

    /* Formen */
    --r-s: 6px; --r-m: 8px; --r-l: 12px; --r-xl: 16px; --r-2xl: 24px; --r-voll: 999px;

    /* Dichte (kompakt überschreibt) */
    --zeile: 44px;
    --bedienung: 36px;
    --karte-innen: var(--a-5);

    /* Bewegung */
    --kurve: cubic-bezier(.2, .8, .2, 1);
    --kurve-feder: cubic-bezier(.34, 1.4, .64, 1);
    --d-schnell: 120ms; --d-mittel: 200ms; --d-lang: 320ms;

    /* Gerüst */
    --leiste-breite: 256px;
    --leiste-schmal: 64px;
    --kopf-hoehe: 56px;
    --tafel-breite: min(480px, 100vw);
    --inhalt-max: 1320px;

    /* Ebenen */
    --e-kopf: 40; --e-leiste: 50; --e-tafel: 60; --e-schleier: 70; --e-dialog: 80; --e-palette: 90; --e-meldung: 100;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
  :root[data-dichte="kompakt"] { --zeile: 34px; --bedienung: 30px; --karte-innen: var(--a-4); }

  @media (prefers-reduced-motion: reduce) {
    :root { --d-schnell: 0ms; --d-mittel: 0ms; --d-lang: 0ms; }
  }
}