/* ============================================================ design-tokens.css — Solano Suite Globale CSS-Variablen. Basis für alle Module. Themes (blackbird.css, command.css etc.) überschreiben diese Werte. ============================================================ */ /* D-01: DM Sans lokal gehostet — keine Verbindung zu Google-Servern (DSGVO) */ @import url('./fonts.css'); /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font); font-size: var(--text-base); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; } a { color: inherit; text-decoration: none; } /* ---- Design Tokens ---- */ :root { /* Farben — Basis (werden ggf. durch Theme überschrieben) */ --navy: #1A237E; --navy-dark: #0D1757; --navy-light: #E8EAF6; --gold: #E8A317; --gold-light: #F5C842; --gold-bg: #FFF8E1; --green: #2E7D32; --green-bg: #E8F5E9; --blue: #1565C0; --blue-bg: #E3F2FD; --purple: #6A1B9A; --purple-bg: #F3E5F5; --red: #D32F2F; --red-bg: #FFEBEE; --orange: #E65100; --orange-bg: #FFF3E0; /* Semantische Farben */ --primary: var(--navy); --accent: var(--gold); --success: var(--green); --error: var(--red); --warning: var(--orange); /* Hintergründe & Oberflächen */ --bg: #F5F6FA; --card: #FFFFFF; --card2: #F8F9FC; --overlay: rgba(0, 0, 0, 0.5); /* Text */ --text: #1A1D2E; --text2: #5A6280; --text3: #8890A8; --text-inv: #FFFFFF; /* Borders */ --border: #E8EBF0; --border-focus: var(--navy); /* Schatten */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.08); /* Radien */ --rs: 8px; --r: 12px; --r-xl: 16px; --r-full: 9999px; /* 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; /* Typografie */ --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base:15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; /* Schriftgewichte */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* Transitions */ --ease: cubic-bezier(.4, 0, .2, 1); --duration: 200ms; /* Layout */ --topbar-h: 56px; --bnav-h: 64px; --sidebar-w: 240px; --max-w: 900px; --touch-min: 44px; } /* ---- Dark Mode ---- Primär gesteuert via JS (auth.js → loadColorScheme). CSS-Variablen werden inline auf gesetzt und überschreiben alle Theme-Dateien. Dieser Block dient als zusätzlicher Fallback für prefers-color-scheme. */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --bg: #0B0F1E; --card: #131929; --card2: #1A2035; --text: #E8EBF4; --text2: #8890B8; --text3: #5A6080; --border: #242C45; --overlay: rgba(0,0,0,.75); --navy-light: #1C2340; --gold-bg: #241C08; --green-bg: #0A1E10; --blue-bg: #091629; --red-bg: #200A0A; --purple-bg: #1A0A28; --orange-bg: #201408; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.5); } } [data-color-scheme="dark"] { --bg: #0B0F1E; --card: #131929; --card2: #1A2035; --text: #E8EBF4; --text2: #8890B8; --text3: #5A6080; --border: #242C45; --overlay: rgba(0,0,0,.75); --navy-light: #1C2340; --gold-bg: #241C08; --green-bg: #0A1E10; --blue-bg: #091629; --red-bg: #200A0A; --purple-bg: #1A0A28; --orange-bg: #201408; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.5); }