/* ===== KTMS Design Tokens — Bushido Strength ===== */ :root { /* Farben — Basis */ --c-ink: #0a0a0a; --c-bg: #fafafa; --c-bg-elev: #ffffff; --c-bg-dark: #111111; --c-bg-dark-elev: #1a1a1a; --c-border: #e5e5e5; --c-border-strong: #262626; --c-muted: #737373; /* Sekundaertext auf hellem Grund (AA) */ --c-subtle: #a3a3a3; /* Nur dekorativ / grosse Labels (unter AA fuer Fliesstext) */ /* Farben — Signal (sparsam: Live / Destroy / Active / Highlight) */ --c-red: #e63946; --c-red-deep: #c1121f; --c-red-soft: #ffebee; /* Farben — Status */ --c-success: #16a34a; --c-warn: #d97706; --c-info: #0284c7; /* Typografie */ --f-display: 'Inter', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px; --fs-3xl: 56px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Spacing (4px-Raster) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Radii & Borders */ --r-xs: 2px; --r-sm: 4px; --r-md: var(--r-sm); --b-1: 1px solid var(--c-border); --b-2: 2px solid var(--c-ink); --b-red: 2px solid var(--c-red); /* Elevation (zurueckhaltend, keine bubbligen Shadows) */ --e-1: 0 1px 0 0 rgba(0, 0, 0, 0.04); --e-2: 0 2px 6px -2px rgba(0, 0, 0, 0.12); --e-red: 0 0 0 2px rgba(230, 57, 70, 0.15); /* Motion */ --t-fast: 100ms cubic-bezier(0.2, 0.8, 0.2, 1); --t-base: 150ms cubic-bezier(0.2, 0.8, 0.2, 1); --t-slow: 240ms cubic-bezier(0.2, 0.8, 0.2, 1); /* Layout */ --topbar-h: 56px; --nav-h: 48px; --content-max: 1440px; } /* ===== Dark-Mode-Overrides ===== */ /* gesetzt via data-theme="dark" auf durch core/theme.js */ [data-theme='dark'] { --c-bg: #0f172a; --c-bg-elev: #1e293b; --c-ink: #f1f5f9; --c-muted: #94a3b8; --c-subtle: #64748b; --c-border: #334155; --c-border-strong: #94a3b8; --c-bg-dark: #020617; --c-bg-dark-elev: #0f172a; --b-1: 1px solid var(--c-border); --b-2: 2px solid var(--c-ink); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.45; -webkit-font-smoothing: antialiased; } body.app { min-height: 100vh; } button, input, select, textarea { font: inherit; color: inherit; }