/* ========================================================================= Starter-Template — Design Tokens (NEUTRALE ENGINE-DEFAULTS) Single source of truth fuer STRUKTUR (Skala, Layout, Form). Marken-Look kommt aus einem Theme in css/themes/ und ueberschreibt die --accent-* und --brand-* Variablen. OHNE Theme rendert alles neutral. Kundenprojekt: eigenes Theme in css/themes/.css anlegen (Kopie von _template.css) und in der HTML statt strukturion.css verlinken. ========================================================================= */ :root { /* --- Neutrals (generisches Dark-Theme, markenneutral) --- */ --n-bg: #0B0C0E; /* Canvas / Default-Hintergrund */ --n-surface: #16181D; /* Flaechen / Cards */ --n-border: #2A2E37; /* Rahmen / Linien */ --n-soft: #9AA0AC; /* Sekundaertext */ --n-text: #F4F5F7; /* Primaertext */ /* --- Akzent (NEUTRALER Default = Indigo; Theme ueberschreibt dies) --- */ --accent: #6366F1; --accent-deep: #4F46E5; /* Button-Hover */ --on-accent: #FFFFFF; /* Schrift AUF Akzentflaeche */ --accent-light: #818CF8; /* heller Mikro-Akzent */ /* --- Semantische Aliase: NUR diese im Theme umbranden --- */ --brand-bg: var(--n-bg); --brand-surface: var(--n-surface); --brand-border: var(--n-border); --brand-text: var(--n-text); --brand-text-soft: var(--n-soft); --brand-accent: var(--accent); /* --- Typografie: neutrale, self-hostbare OFL-Defaults --- Theme darf --font-* ueberschreiben. Ohne Fonts greift System-Fallback. */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Modulare Skala ~1.25 (clamp = responsiv ohne Media Queries) */ --fs-display: clamp(2.6rem, 6vw, 4rem); --fs-h1: clamp(2.1rem, 4.5vw, 3rem); --fs-h2: clamp(1.6rem, 3vw, 2.25rem); --fs-h3: 1.5rem; --fs-body-l: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.8125rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6; /* --- Layout / Form --- */ --radius-card: 16px; --radius-button: 10px; --border-hair: 1px solid var(--brand-border); --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 5rem; --space-7: 8rem; --container: 1120px; --gutter: clamp(1.25rem, 4vw, 3rem); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.6s; } /* Optionale helle Variante: (markenneutral) */ [data-theme="light"] { --brand-bg: #FFFFFF; --brand-surface: #F4F5F7; --brand-border: #E2E5EA; --brand-text: #0B0C0E; --brand-text-soft: #5B616B; }