/* FOX Designsystem – tokens.css (generiert aus tokens.json via build.py, nicht von Hand ändern) */
/* Nutzung: <html data-fox-theme="foxhole|magenta|amber|gruen|polizei">  (Standard: foxhole) */
:root, [data-fox-theme]{
  --fox-font-head:Orbitron, Rajdhani, system-ui, sans-serif;
  --fox-font-ui:Rajdhani, Inter, system-ui, sans-serif;
  --fox-font-body:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fox-font-mono:ui-monospace, JetBrains Mono, Menlo, Consolas, monospace;
  --fox-fs-xs:0.75rem;
  --fox-fs-sm:0.875rem;
  --fox-fs-base:1rem;
  --fox-fs-md:1.125rem;
  --fox-fs-lg:1.375rem;
  --fox-fs-xl:1.75rem;
  --fox-fs-2xl:2.25rem;
  --fox-fs-3xl:3rem;
  --fox-fw-regular:400;
  --fox-fw-medium:500;
  --fox-fw-semibold:600;
  --fox-fw-bold:700;
  --fox-fw-black:900;
  --fox-space-0:0rem;
  --fox-space-1:0.25rem;
  --fox-space-2:0.5rem;
  --fox-space-3:0.75rem;
  --fox-space-4:1rem;
  --fox-space-5:1.25rem;
  --fox-space-6:1.5rem;
  --fox-space-8:2rem;
  --fox-space-10:2.5rem;
  --fox-space-12:3rem;
  --fox-space-16:4rem;
  --fox-radius-none:0px;
  --fox-radius-sm:2px;
  --fox-radius-md:3px;
  --fox-radius-lg:6px;
  --fox-radius-pill:999px;
  --fox-depth:1;
  --fox-backdrop:rgba(0,0,0,.7); --fox-backdrop-blur:4px; --fox-z-modal:99999;
  --fox-dur-fast:150ms; --fox-dur-base:220ms; --fox-dur-slow:400ms; --fox-ease:cubic-bezier(.2,.7,.2,1);
  --fox-success:#39ff88;
  --fox-warning:#f5f000;
  --fox-danger:#ff3860;
  --fox-info:#36d6ff;
  /* 3D-Tiefe (abgeleitet aus Akzent-RGB -> folgt jedem Theme) */
  --fox-hi:inset 0 1px 0 rgba(255,255,255,calc(.07*var(--fox-depth)));
  --fox-bevel:inset 0 -2px 0 rgba(0,0,0,calc(.35*var(--fox-depth)));
  --fox-glow:0 0 0 1px rgba(var(--fox-accent-rgb),.06),0 0 14px -4px rgba(var(--fox-accent-rgb),calc(.28*var(--fox-depth)));
  --fox-drop:0 2px 3px rgba(0,0,0,calc(.35*var(--fox-depth))),0 12px 24px -8px rgba(0,0,0,calc(.6*var(--fox-depth))),0 26px 50px -22px rgba(var(--fox-accent2-rgb),calc(.22*var(--fox-depth)));
  --fox-drop-hover:0 4px 6px rgba(0,0,0,.35),0 20px 36px -10px rgba(0,0,0,.65),0 34px 64px -24px rgba(var(--fox-accent2-rgb),calc(.35*var(--fox-depth)));
  --fox-shadow:var(--fox-hi),var(--fox-bevel),var(--fox-glow),var(--fox-drop);
  --fox-shadow-hover:var(--fox-hi),var(--fox-bevel),0 0 0 1px rgba(var(--fox-accent2-rgb),.25),0 0 18px -2px rgba(var(--fox-accent2-rgb),.4),var(--fox-drop-hover);
  --fox-gradient:linear-gradient(165deg,rgba(255,255,255,calc(.05*var(--fox-depth))) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,calc(.22*var(--fox-depth))) 100%);
  --fox-lift:perspective(900px) translateY(-4px) rotateX(1.6deg);
  --fox-btn-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4),inset 0 0 10px rgba(var(--fox-accent-rgb),.12),0 0 9px rgba(var(--fox-accent-rgb),.25),0 4px 10px -3px rgba(0,0,0,.65);
  --fox-btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.4),inset 0 0 12px rgba(var(--fox-accent-rgb),.18),0 0 16px rgba(var(--fox-accent-rgb),.45),0 8px 16px -4px rgba(0,0,0,.7);
  --fox-btn-shadow-active:inset 0 2px 6px rgba(0,0,0,.55),0 0 8px rgba(var(--fox-accent-rgb),.3);
}
:root, [data-fox-theme="foxhole"]{ /* Foxhole */
  --fox-accent:#ff3b30; --fox-accent-rgb:255,59,48; --fox-accent2:#ff8a80; --fox-accent2-rgb:255,138,128;
  --fox-bg:#0a0a0b; --fox-bg2:#111214; --fox-panel:rgba(17,18,20,0.9); --fox-text:#ececee; --fox-muted:#9a9da4;
  --fox-line:rgba(255,59,48,.24); --fox-on-accent:#000;
}
[data-fox-theme="magenta"]{ /* Magenta */
  --fox-accent:#ff2d6f; --fox-accent-rgb:255,45,111; --fox-accent2:#ff7aa2; --fox-accent2-rgb:255,122,162;
  --fox-bg:#0a0a0b; --fox-bg2:#111214; --fox-panel:rgba(17,18,20,0.9); --fox-text:#ececee; --fox-muted:#9a9da4;
  --fox-line:rgba(255,45,111,.24); --fox-on-accent:#000;
}
[data-fox-theme="amber"]{ /* Amber */
  --fox-accent:#ffb000; --fox-accent-rgb:255,176,0; --fox-accent2:#ffd36b; --fox-accent2-rgb:255,211,107;
  --fox-bg:#0a0a0b; --fox-bg2:#111214; --fox-panel:rgba(17,18,20,0.9); --fox-text:#ececee; --fox-muted:#9a9da4;
  --fox-line:rgba(255,176,0,.24); --fox-on-accent:#000;
}
[data-fox-theme="gruen"]{ /* Grün */
  --fox-accent:#19d26b; --fox-accent-rgb:25,210,107; --fox-accent2:#7cf2ae; --fox-accent2-rgb:124,242,174;
  --fox-bg:#0a0a0b; --fox-bg2:#111214; --fox-panel:rgba(17,18,20,0.9); --fox-text:#ececee; --fox-muted:#9a9da4;
  --fox-line:rgba(25,210,107,.24); --fox-on-accent:#000;
}
[data-fox-theme="polizei"]{ /* Polizei */
  --fox-accent:#4d8bff; --fox-accent-rgb:77,139,255; --fox-accent2:#36d6ff; --fox-accent2-rgb:54,214,255;
  --fox-bg:#050a17; --fox-bg2:#0a1328; --fox-panel:rgba(9,18,38,0.9); --fox-text:#e6eeff; --fox-muted:#9fb2d6;
  --fox-line:rgba(77,139,255,.24); --fox-on-accent:#000;
}
@media (max-width:600px){:root,[data-fox-theme]{--fox-drop:0 2px 3px rgba(0,0,0,.35),0 10px 18px -8px rgba(0,0,0,.55);--fox-glow:0 0 0 1px rgba(var(--fox-accent-rgb),.06)}}
@media (prefers-reduced-motion:reduce){:root,[data-fox-theme]{--fox-dur-fast:0ms;--fox-dur-base:0ms;--fox-dur-slow:0ms;--fox-lift:none}}
[data-fox-motion="off"]{--fox-dur-fast:0ms;--fox-dur-base:0ms;--fox-dur-slow:0ms;--fox-lift:none}