/* Lumen v2.0.0: Tokens (Farben, Glas, Licht, Raster, Schrift, Bewegung). Regeln in DESIGN.md. */

/*
  Hell („Morgenlicht“) und Dunkel („Nachtglas“) stehen jeweils als light-dark(hell, dunkel).
  Die Seite folgt der Systemeinstellung; data-theme="hell" oder "dunkel" auf <html> überschreibt.
  Das Attribut wirkt auch auf einzelnen Bereichen (z. B. im Styleguide beide Modi nebeneinander).
*/
:root { color-scheme: light dark; }
[data-theme="hell"] { color-scheme: light; }
[data-theme="dunkel"] { color-scheme: dark; }

:root {
  /* Lichtfeld */
  --basis:          light-dark(#F2F4F7, #080B11);                 /* Nebelweiß / Mitternacht */
  --nebel-1:        light-dark(#CFE3F5, #123456);                 /* Eisblau / Tiefsee */
  --nebel-2:        light-dark(#C8EEF0, #0E4A55);                 /* Cyan-Hauch / Polarlicht */
  --nebel-3:        light-dark(#E6DDF3, #2A2148);                 /* Perlmutt / Perlmutt Nacht */
  --nebel-4:        light-dark(#D9E9F7, #102A44);                 /* vierter Nebel, zwischen 1 und 2 */

  /* Glas: Ebene 1 Module, 2 Elemente in Modulen, 3 Menüs/Tooltips/Slide-over */
  --glas-1:         light-dark(rgba(255, 255, 255, 0.55), rgba(22, 28, 38, 0.45));   /* Klarglas / Rauchglas */
  --glas-2:         light-dark(rgba(255, 255, 255, 0.72), rgba(34, 42, 56, 0.60));   /* Milchglas / Rauchglas dicht */
  --glas-3:         light-dark(rgba(255, 255, 255, 0.86), rgba(30, 38, 52, 0.88));
  --kante-hell:     light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.16)); /* Lichtkante */
  --kante-mitte:    light-dark(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03));
  --kante-dunkel:   light-dark(rgba(20, 40, 70, 0.08),    rgba(255, 255, 255, 0.01)); /* Schattenkante */
  --kante-perlmutt: light-dark(rgba(230, 221, 243, 0.60), rgba(120, 100, 190, 0.10)); /* Hauch in der Kante */
  --innenkante:     light-dark(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.10)); /* obere Lichtkante innen */
  --glanz:          light-dark(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); /* Reflex im oberen Drittel */
  --kontakt:        light-dark(rgba(30, 50, 80, 0.04),    transparent);
  --luftschatten:   light-dark(rgba(30, 50, 80, 0.10),    rgba(0, 0, 0, 0.45));
  --hochschatten:   light-dark(rgba(30, 50, 80, 0.16),    rgba(0, 0, 0, 0.60));
  --cursorlicht:    light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.06));
  --oberkante-aktiv: light-dark(rgba(255, 255, 255, 0.80), rgba(92, 200, 255, 0.22)); /* dunkel: Hauch Akzent */
  --rauchglas:      light-dark(rgba(18, 24, 34, 0.86),    rgba(6, 9, 14, 0.72));      /* Code, auch im hellen Modus */
  --rauchglas-text: light-dark(#E4EAF1, #DCE4EE);

  /* Text und Linien */
  --text-1:         light-dark(#16202C, #EEF2F7);                 /* Tinte / Mondweiß */
  --text-2:         light-dark(#5E6B7A, #97A3B3);                 /* Schiefer / Silberdunst */
  --text-3:         light-dark(#8592A1, #6E7A8C);                 /* Dunst / Nachtgrau, für AA auf Glas angehoben */
  --platzhalter:    light-dark(#9AA6B4, #5A6576);
  --linie:          light-dark(rgba(20, 40, 70, 0.08), rgba(255, 255, 255, 0.07)); /* Lichtlinie */
  --linie-hell:     light-dark(rgba(20, 40, 70, 0.10), rgba(255, 255, 255, 0.12)); /* Lichtlinie in Modulen */

  /* Licht: Akzent „Eislicht“ und Zustände */
  --akzent:         light-dark(#1A8FD6, #5CC8FF);
  --akzent-glow:    light-dark(rgba(26, 143, 214, 0.22), rgba(92, 200, 255, 0.30));
  --auf-akzent:     light-dark(#FFFFFF, #06121C);                 /* Symbol auf der gefüllten Senden-Linse */
  --erfolg:         light-dark(#2E9C7A, #56D4A8);                 /* Jade */
  --warnung:        light-dark(#D08A1E, #F2B455);                 /* Bernstein */
  --fehler:         light-dark(#D0546A, #FF7D93);                 /* Rosé */

  /* Raster (4 px) und Maße */
  --r-aussen: 24px;          /* Glasscheibe */
  --r-innen: 14px;           /* Elemente in der Scheibe */
  --r-plaettchen: 16px;      /* Nutzer-Nachricht */
  --abstand-aussen: 32px;
  --abstand-modul: 20px;
  --innen: 20px;             /* Innenabstand der Module */
  --seite: 340px;            /* Seitenleiste */
  --kopf: 64px;              /* Header */
  --blur-1: 40px;
  --blur-3: 60px;
  --saettigung: 160%;

  /* Schrift */
  --schrift-marke: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-code: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Bewegung */
  --kurve-licht: cubic-bezier(0.2, 0, 0, 1);       /* Hover-Licht 200 ms */
  --kurve-klappen: cubic-bezier(0.32, 0.72, 0, 1); /* Ein-/Ausklappen 420 ms */
  --kurve-aus: cubic-bezier(0.23, 1, 0.32, 1);     /* Einblenden, Überblenden */
  --dauer-licht: 200ms;
  --dauer-druck: 120ms;
  --dauer-klappen: 420ms;
  --dauer-theme: 900ms;
}

@media (max-width: 1279px) {
  :root { --seite: 300px; --abstand-modul: 16px; --abstand-aussen: 24px; }
}
@media (max-width: 599px) {
  :root { --abstand-aussen: 12px; --r-aussen: 20px; --innen: 16px; }
}

/* Mehr Kontrast: dichteres Glas, kräftigere Nebentexte */
@media (prefers-contrast: more) {
  :root {
    --glas-1: light-dark(rgba(255, 255, 255, 0.92), rgba(14, 18, 26, 0.94));
    --glas-2: light-dark(#FFFFFF, #1B2330);
    --text-2: light-dark(#3E4A57, #C2CCD8);
    --text-3: light-dark(#56626F, #A0ABB9);
    --linie:  light-dark(rgba(20, 40, 70, 0.30), rgba(255, 255, 255, 0.30));
  }
}

/* Transparenz reduzieren: System (prefers-reduced-transparency) oder data-transparenz="reduziert" */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-transparenz="voll"]) {
    --glas-1: light-dark(#FAFBFC, #121821);
    --glas-2: light-dark(#FFFFFF, #1B2330);
    --glas-3: light-dark(#FFFFFF, #1B2330);
    --rauchglas: light-dark(#1A212C, #06090E);
  }
}
:root[data-transparenz="reduziert"] {
  --glas-1: light-dark(#FAFBFC, #121821);
  --glas-2: light-dark(#FFFFFF, #1B2330);
  --glas-3: light-dark(#FFFFFF, #1B2330);
  --rauchglas: light-dark(#1A212C, #06090E);
}