/* =========================================================
   DaXPortal Design Tokens — Single Source of Truth
   Zwei-Farben-System: --accent (Akzentfarbe vom Admin) +
   --spotlight (Grundfarbe für dunkle Brand-Flächen).
   Endnutzer schaltet nur Hell/Dunkel via html[data-theme].
   ========================================================= */

/* ── Lokale Schriften (DSGVO-konform) ───────────────────── */
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/OpenSans-Regular.ttf") format("truetype"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/OpenSans-Medium.ttf") format("truetype"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/OpenSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/OpenSans-Bold.ttf") format("truetype"); }
@font-face { font-family:"Open Sans Condensed"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Open Sans Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/OpenSans_Condensed-Bold.ttf") format("truetype"); }
@font-face { font-family:"Open Sans Condensed"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/JetBrainsMono-Medium.woff2") format("woff2"); }

/* ── Hell-Modus (Standard) ──────────────────────────────── */
:root, html[data-theme="light"] {
  /* Oberflächen */
  --surface:        #ffffff;
  --bg:             #F7F8FA;
  --bg-soft:        #F1F3F6;
  --bg-sunken:      #F7F8FA;

  /* Text */
  --ink:            #0F1419;
  --ink-muted:      #4A5562;
  --ink-subtle:     #6B7280;
  --ink-faint:      #9CA3AF;

  /* Borders & Inputs */
  --border:         #E5E7EB;
  --border-soft:    #EEF0F3;
  --input-border:   #D1D5DB;

  /* Marken-Farben (Standardwerte — werden vom Admin via inline-style überschrieben) */
  --accent:         var(--theme-akzent, #D1131A);
  --spotlight:      var(--theme-grundfarbe, #0F1419);

  /* Schatten */
  --shadow-sm:      0 1px 2px rgba(15,20,25,0.04);
  --shadow-md:      0 8px 24px rgba(15,20,25,0.10);

  /* Topbar */
  --topbar-bg:      rgba(255,255,255,0.92);

  /* Status-Farben */
  --info-bg:        #EFF6FF; --info-fg:    #1E4E8C; --info-bd:  #BFDBFE; --info-solid:    #1E4E8C;
  --warn-bg:        #FFFBEB; --warn-fg:    #B45309; --warn-bd:  #FDE68A; --warn-solid:    #B45309;
  --danger-bg:      #FEF2F2; --danger-fg:  #D1131A; --danger-bd:#FECACA; --danger-solid:  #D1131A;
  --success-bg:     #ECFDF5; --success-fg: #15803D; --success-bd:#BBF7D0;--success-solid: #15803D;
  --neutral-bg:     #F1F3F6; --neutral-fg: #4A5562; --neutral-bd:#E5E7EB;--neutral-solid: #6B7280;

  /* Maße */
  --topbar-h:       56px;
  --sidebar-w:      248px;
  --radius-card:    8px;
  --radius-ctrl:    6px;
  --radius-input:   4px;
  --radius-pill:    999px;
  --page-max:       1280px;
  --page-max-uhd:   1600px;

  /* ── Rückwärts-Kompatibilität (für site.css, admin.css etc.) ── */
  --portal-paper:   var(--surface);
  --portal-bg:      var(--bg);
  --portal-ink:     var(--ink);
  --portal-muted:   var(--ink-subtle);
  --portal-line:    var(--border);
  --portal-accent:  var(--accent);
  --portal-accent-dark: var(--accent);
  --dx-white:       var(--surface);
  --dx-bg:          var(--bg);
  --dx-border:      var(--border);
  --dx-text:        var(--ink-muted);
  --dx-text-dark:   var(--ink);
  --dx-text-muted:  var(--ink-subtle);
  --dx-shadow-xs:   var(--shadow-sm);
  --dx-shadow-sm:   var(--shadow-sm);
  --dx-shadow-md:   var(--shadow-md);
  --dx-red:         var(--accent);
  --dx-red-dark:    var(--accent);
  --theme-akzent:   #D1131A;
  --theme-grundfarbe: #0F1419;

  /* DevExpress Font-Token */
  --dxds-font-family-base: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Dunkel-Modus ─────────────────────────────────────────── */
html[data-theme="dark"] {
  /* Oberflächen */
  --surface:        #161B22;
  --bg:             #0D1117;
  --bg-soft:        #21262D;
  --bg-sunken:      #0D1117;

  /* Text */
  --ink:            #E6EDF3;
  --ink-muted:      #B6C2CF;
  --ink-subtle:     #8B949E;
  --ink-faint:      #6E7681;

  /* Borders & Inputs */
  --border:         #2A313A;
  --border-soft:    #21272F;
  --input-border:   #39414B;

  /* Marken-Farben (leicht aufgehellt im Dunkeln) */
  --accent:         var(--theme-akzent, #F0353C);
  --spotlight:      var(--theme-grundfarbe, #1C2530);

  /* Schatten */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:      0 10px 28px rgba(0,0,0,0.50);

  /* Topbar */
  --topbar-bg:      rgba(13,17,23,0.85);

  /* Status-Farben */
  --info-bg:        rgba(56,139,253,0.16); --info-fg:    #79C0FF; --info-bd:   rgba(56,139,253,0.40); --info-solid:    #6CB6FF;
  --warn-bg:        rgba(210,153,34,0.16); --warn-fg:    #E3B341; --warn-bd:   rgba(210,153,34,0.40); --warn-solid:    #E3B341;
  --danger-bg:      rgba(248,81,73,0.16);  --danger-fg:  #FF7B72; --danger-bd: rgba(248,81,73,0.40);  --danger-solid:  #FF7B72;
  --success-bg:     rgba(63,185,80,0.16);  --success-fg: #56D364; --success-bd:rgba(63,185,80,0.40);  --success-solid: #56D364;
  --neutral-bg:     #21262D;               --neutral-fg: #B6C2CF; --neutral-bd:#30363D;               --neutral-solid: #8B949E;

  /* ── Rückwärts-Kompatibilität (überschreibt site.css dark-overrides via höhere Spezifität) ── */
  --portal-paper:   var(--surface);
  --portal-bg:      var(--bg);
  --portal-ink:     var(--ink);
  --portal-muted:   var(--ink-subtle);
  --portal-line:    var(--border);
  --portal-accent:  var(--accent);
  --portal-accent-dark: var(--accent);
  --dx-white:       var(--surface);
  --dx-bg:          var(--bg);
  --dx-border:      var(--border);
  --dx-text:        var(--ink-muted);
  --dx-text-dark:   var(--ink);
  --dx-text-muted:  var(--ink-subtle);
  --dx-shadow-xs:   var(--shadow-sm);
  --dx-shadow-sm:   var(--shadow-sm);
  --dx-shadow-md:   var(--shadow-md);
  --dx-red:         var(--accent);
  --dx-red-dark:    var(--accent);
}

/* ── Globale Basis-Styles ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  font-size: 16px;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .85; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

input::placeholder, textarea::placeholder { color: var(--ink-faint); }