/* ══════════════════════════════════════════════
   AK DESIGN SYSTEM — Zentrale Theme-Tokens
   Original liegt hier (knoll-infra), wird per
   playbooks/design-system/10_publish_tokens.yml nach S3
   (Bucket "styleak") publiziert. ERP/PIM/Portal/Cockpit/GRDB/Dispo binden
   die S3-Kopie build-time ein (Sync beim Deploy) — Änderung hier + Publish
   + App-Deploy = neue Farben überall. Ausgerichtet auf ANTON KNOLL Brand
   Manual V1: Orange als --accent/--brand-primary, Berry als
   --highlight/--brand-accent, vier Sektorfarben (Düngemittel/Rohstoffe/
   Logistik) als eigene Tokens. Light = Default, data-theme auf <html>
   steuert hell/dunkel. Jede App darf --brand-primary/--brand-accent per
   Inline-Style auf documentElement überschreiben, ohne die Struktur-Tokens
   anzufassen. Quelle/Referenz: gleicher Tokensatz wie
   knoll-infra/files/preview/styleguide.html.
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

[data-theme="light"] {
  --bg:             #F0F0F5;
  --bg-surface:     #E4E4EA;
  --bg-card:        #FFFFFF;
  --bg-overlay:     rgba(60,60,60,0.04);
  --text-primary:   #1A1A1A;
  --text-secondary: #3C3C3C;
  --text-muted:     #8A8A90;
  --border:         rgba(60,60,60,0.14);
  --border-hover:   rgba(60,60,60,0.35);
  --accent:         #FF6E00;
  --accent-hover:   #E05F00;
  --accent-dim:     rgba(255,110,0,0.10);
  --highlight:      #730037;
  --orange:         #827864;
  --orange-dim:     rgba(130,120,100,0.12);
  --green:          #16A34A;
  --green-dim:      rgba(22,163,74,0.10);
  --red:            #C0392B;
  --red-dim:        rgba(192,57,43,0.10);
  --shadow-sm:      0 1px 8px rgba(26,26,26,0.06);
  --shadow-md:      0 4px 24px rgba(26,26,26,0.10);
  --glow:           none;
  --noise-1:        rgba(255,110,0,0.06);
  --noise-2:        rgba(115,0,55,0.04);
  --toggle-bg:      #E4E4EA;
  --toggle-knob:    #FFFFFF;
  --font-display:   'Mulish', sans-serif;
  /* Sektorfarben (Brand Manual S.14/22f) — je Sektor mit der Markenfarbe Orange kombiniert: */
  --sector-duenger-dark:    #004141; /* Dark Pine */
  --sector-duenger-light:   #004B4B; /* Light Pine */
  --sector-rohstoffe-umber: #827864; /* Raw Umber */
  --sector-rohstoffe-beige: #E1D2CD; /* Beige */
  --sector-logistik-blue:   #053C69; /* Blue */
  /* Pro App überschreibbar (per App-eigenem Akzent, kein Tenant-Branding hier): */
  --brand-primary:  var(--accent);
  --brand-accent:   var(--highlight);
}

[data-theme="dark"] {
  --bg:             #1A1A1A;
  --bg-surface:     #242424;
  --bg-card:        #2E2E2E;
  --bg-overlay:     rgba(255,255,255,0.04);
  --text-primary:   #F5F5F5;
  --text-secondary: #B8B8B8;
  --text-muted:     #7A7A7A;
  --border:         rgba(255,255,255,0.14);
  --border-hover:   rgba(255,255,255,0.30);
  --accent:         #FF8A33;
  --accent-hover:   #FFA359;
  --accent-dim:     rgba(255,138,51,0.16);
  --highlight:      #A6295C;
  --orange:         #A89A82;
  --orange-dim:     rgba(168,154,130,0.16);
  --green:          #4ADE80;
  --green-dim:      rgba(74,222,128,0.10);
  --red:            #F87171;
  --red-dim:        rgba(248,113,113,0.12);
  --shadow-sm:      none;
  --shadow-md:      none;
  --glow:           0 0 28px rgba(255,110,0,0.30);
  --noise-1:        rgba(255,110,0,0.14);
  --noise-2:        rgba(255,138,51,0.08);
  --toggle-bg:      #3A3A3A;
  --toggle-knob:    #FFA359;
  --font-display:   'Mulish', sans-serif;
  --sector-duenger-dark:    #006B6B;
  --sector-duenger-light:   #008080;
  --sector-rohstoffe-umber: #A89A82;
  --sector-rohstoffe-beige: #E1D2CD;
  --sector-logistik-blue:   #2E6CA4;
  --brand-primary:  var(--accent);
  --brand-accent:   var(--highlight);
}