/* mazi – gemeinsame Basis für Website und App. Tokens hier sind die einzige Quelle für Farben, Radien und Schatten
   (Regeln und Bausteine: DESIGN.md im Repo-Root; Prüfung: node site/tools/ui-lint.mjs). */
:root{
  --bg:#FFFFFF; --bg-alt:#FAF9FB; --fg:#160D1A; --fg-2:rgba(22,13,26,.66); --fg-3:rgba(22,13,26,.58);
  --line:rgba(22,13,26,.10); --line-2:rgba(22,13,26,.06);
  --plum:#2A1230; --plum-2:#3E1C47; --plum-tint:#F5EFF6; --on-plum:#FFFFFF;
  --lime:#D6F84C; --lime-tint:#F4FBD9; --on-lime:#2A1230;
  --surface:#FFFFFF; --glass:rgba(255,255,255,.72);
  --ok:#2F9E5B; --ok-ink:#1F7A45; --ok-tint:rgba(47,158,91,.12); --on-ok:#FFFFFF;
  --err:#C8343C; --warn-ink:#A56A00; --warn-tint:rgba(214,150,30,.14);
  /* fest in beiden Themen: Marke, Medienflächen, Platzhalter, Fremdmarken */
  --brand-plum:#2A1230; --brand-lime:#D6F84C; --on-dark:#FFFFFF;
  --avatar-grad:linear-gradient(135deg,#2A1230,#D6F84C);
  --media-bg:#120A15; --on-media-2:rgba(244,238,246,.8); --media-line:rgba(244,238,246,.3); --media-chip:rgba(255,255,255,.88);
  --media-fade:rgba(20,8,24,.55); --media-tag:rgba(20,8,24,.38); --err-on-media:#F1B3B6;
  --scrim:rgba(18,10,22,.42); --scrim-strong:rgba(18,10,22,.6);
  --illu-1:#5B2C66; --illu-2:#6D3A78; --illu-3:#C7A6CF; --illu-4:#8A9E2A;
  --placeholder-bg:#1F3A4D; --placeholder-fg:#EAF4F2; --ext-meta:#0866FF; --ext-shopify:#5E8E3E;
  --f:'Quicksand',ui-rounded,'SF Pro Rounded',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Radien: xs Balken, tag kleine Marken, ctl Bedienelemente und Listenzeilen, card Karten und Medien,
     float schwebende Container (Navigation, Popover, Modal), round nur Kreise/Pillen mit Bedeutung */
  --r-xs:4px; --r-tag:6px; --r-ctl:8px; --r-card:10px; --r-float:12px; --r-round:999px;
  /* Schatten: sh Fläche, sh-ctl aktiver Umschalter, sh-lift abgehobene Elemente, sh-pop Popover/Modal, sh-glass Glas-Leisten */
  --sh:0 0 0 1px var(--line-2),0 2px 6px rgba(42,18,48,.02),0 24px 48px -24px rgba(42,18,48,.08);
  --sh-ctl:0 0 0 1px var(--line),0 1px 3px rgba(42,18,48,.10);
  --sh-lift:0 12px 28px -14px rgba(42,18,48,.25);
  --sh-pop:0 0 0 1px var(--line),0 24px 48px -16px rgba(42,18,48,.28);
  --sh-glass:0 0 0 1px var(--line-2),0 8px 30px -12px rgba(42,18,48,.09);
  --sh-knob:0 1px 3px rgba(0,0,0,.2);
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#120A15; --bg-alt:#180F1C; --fg:#F4EEF6; --fg-2:rgba(244,238,246,.7); --fg-3:rgba(244,238,246,.52);
  --line:rgba(244,238,246,.12); --line-2:rgba(244,238,246,.07);
  --plum:#D6F84C; --plum-2:#E3FB7E; --plum-tint:#251A2A; --on-plum:#2A1230;
  --lime:#D6F84C; --lime-tint:#232A10; --surface:#1B1220; --glass:rgba(27,18,32,.72); color-scheme:dark;
  --sh:0 0 0 1px var(--line-2),0 24px 48px -24px rgba(0,0,0,.6);
  --sh-ctl:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.4); --sh-lift:0 12px 28px -14px rgba(0,0,0,.6);
  --sh-pop:0 0 0 1px var(--line),0 24px 48px -16px rgba(0,0,0,.7); --sh-glass:0 0 0 1px var(--line-2),0 8px 30px -12px rgba(0,0,0,.5);
  --ok-ink:#4CC27A; --warn-ink:#E0A43A;
}}
:root[data-theme="dark"]{
  --bg:#120A15; --bg-alt:#180F1C; --fg:#F4EEF6; --fg-2:rgba(244,238,246,.7); --fg-3:rgba(244,238,246,.52);
  --line:rgba(244,238,246,.12); --line-2:rgba(244,238,246,.07);
  --plum:#D6F84C; --plum-2:#E3FB7E; --plum-tint:#251A2A; --on-plum:#2A1230;
  --lime:#D6F84C; --lime-tint:#232A10; --surface:#1B1220; --glass:rgba(27,18,32,.72); color-scheme:dark;
  --sh:0 0 0 1px var(--line-2),0 24px 48px -24px rgba(0,0,0,.6);
  --sh-ctl:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.4); --sh-lift:0 12px 28px -14px rgba(0,0,0,.6);
  --sh-pop:0 0 0 1px var(--line),0 24px 48px -16px rgba(0,0,0,.7); --sh-glass:0 0 0 1px var(--line-2),0 8px 30px -12px rgba(0,0,0,.5);
  --ok-ink:#4CC27A; --warn-ink:#E0A43A;
}