/* 3D-ARK Design-Tokens — übernommen aus dem 3D-ARK Design System */

/* Lokal gehostete Webfonts (DSGVO-konform, keine Google-Verbindung) — latin-Subset */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/chakra-petch-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/chakra-petch-500.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/chakra-petch-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/chakra-petch-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/jetbrains-mono-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/space-grotesk-700.woff2') format('woff2')}

:root{
/* base */
--black:#000000;--white:#ffffff;
--gray-950:#0a0a0c;--gray-900:#121216;--gray-800:#1a1a20;--gray-700:#26262e;--gray-500:#55555f;--gray-300:#9d9da8;
--cyan:#00f0ff;--cyan-dim:#00b8c4;--magenta:#ff2e88;--lime:#c8ff00;
--green:#3dffa2;--amber:#ffc94d;--red:#ff3b3b;
/* semantic */
--bg-0:var(--black);--bg-1:var(--gray-950);--bg-2:var(--gray-900);--bg-3:var(--gray-800);
--surface-card:var(--gray-950);--surface-raised:var(--gray-900);--surface-overlay:rgba(10,10,12,.88);
--fg-1:var(--white);--fg-2:rgba(255,255,255,.64);--fg-3:rgba(255,255,255,.40);--fg-inverse:var(--black);
--accent:var(--cyan);--accent-strong:var(--cyan);--accent-2:var(--magenta);--accent-3:var(--lime);
--text-body:var(--fg-2);--text-heading:var(--fg-1);--text-muted:var(--fg-3);--text-accent:var(--accent);
--border-1:rgba(255,255,255,.18);--border-2:rgba(255,255,255,.09);--border-accent:var(--accent);
--success:var(--green);--warning:var(--amber);--danger:var(--red);
--focus-ring:var(--accent);
--link:var(--accent);--link-hover:var(--fg-1);
/* typography */
--font-display:"Chakra Petch",system-ui,sans-serif;
--font-body:"Space Grotesk",system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;
--text-xs:11px;--text-sm:13px;--text-md:15px;--text-lg:18px;--text-xl:24px;--text-2xl:32px;--text-3xl:44px;--text-4xl:64px;
--leading-tight:1.1;--leading-snug:1.3;--leading-body:1.55;
--tracking-wide:.08em;--tracking-wider:.16em;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
/* spacing */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
--radius-0:0px;--radius-1:2px;--radius-2:4px;--radius-full:999px;
--container-max:1200px;
/* effects */
--glow-accent:0 0 20px rgba(0,240,255,.35);
--glow-accent-strong:0 0 32px rgba(0,240,255,.55);
--glow-magenta:0 0 20px rgba(255,46,136,.4);
--shadow-overlay:0 16px 48px rgba(0,0,0,.7);
--dot-grid:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.2px);
--dot-grid-size:16px 16px;
--dot-grid-accent:radial-gradient(circle,rgba(0,240,255,.35) 1px,transparent 1.2px);
--scanline:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
--ease-out:cubic-bezier(.16,1,.3,1);--ease-snap:cubic-bezier(.7,0,.2,1);
--dur-fast:120ms;--dur-med:240ms;
}

/* Light mode — data-theme="light" auf <html>. Dark ist Default der Tokens. */
[data-theme="light"]{
--bg-0:#ffffff;--bg-1:#f4f4f6;--bg-2:#ebebef;--bg-3:#e0e0e6;
--surface-card:#fafafc;--surface-raised:#f4f4f6;--surface-overlay:rgba(255,255,255,.9);
--fg-1:#000000;--fg-2:rgba(0,0,0,.68);--fg-3:rgba(0,0,0,.44);--fg-inverse:#ffffff;
--accent:#0097a5;--accent-2:#e0006b;--accent-3:#6f9400;
--border-1:rgba(0,0,0,.24);--border-2:rgba(0,0,0,.10);
--success:#008f54;--warning:#a86e00;--danger:#d81f1f;
--glow-accent:0 0 20px rgba(0,151,165,.3);
--glow-accent-strong:0 0 32px rgba(0,151,165,.5);
--glow-magenta:0 0 20px rgba(224,0,107,.35);
--shadow-overlay:0 16px 48px rgba(0,0,0,.18);
--dot-grid:radial-gradient(circle,rgba(0,0,0,.16) 1px,transparent 1.2px);
--dot-grid-accent:radial-gradient(circle,rgba(0,151,165,.4) 1px,transparent 1.2px);
--scanline:repeating-linear-gradient(to bottom,rgba(0,0,0,.03) 0 1px,transparent 1px 3px);
}