/* ╔══════════════════════════════════════════════════════════════╗ ║ tokens.css – Design-Tokens (Single Source of Truth) ║ ║ ║ ║ Diese Datei wird von ALLEN anderen CSS/HTML-Dateien ║ ║ eingebunden. Farben, Fonts, Abstände, Schatten und ║ ║ Radien NUR HIER ändern – nie doppelt pflegen. ║ ║ ║ ║ Einbindung in CSS: @import url('tokens.css'); ║ ║ Einbindung in HTML: ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ── Primärfarbe (Teal) ────────────────────────────────────── Hauptakzentfarbe für Links, Buttons, Icons, Balken. Alle Abstufungen hier zentral anpassen. */ --clr-primary: #0f766e; /* Teal-600 – Hauptfarbe */ --clr-primary-dark: #0d5f58; /* Teal-700 – Hover/Fokus */ --clr-primary-light: #14b8a6; /* Teal-400 – heller Akzent */ --clr-primary-xlight:#f0fdfa; /* Teal-50 – sehr heller BG */ /* ── Akzentfarbe (Amber) ───────────────────────────────────── Für Highlights, Unterstriche, Warnhinweise, Badges. */ --clr-accent: #f59e0b; /* Amber-400 – Akzent */ --clr-accent-dark: #d97706; /* Amber-500 – Hover auf Accent */ /* ── Neutralfarben ────────────────────────────────────────── */ --clr-bg: #f8fafc; /* Seitenhintergrund (Slate-50) */ --clr-surface: #ffffff; /* Karten, Boxen, Formulare */ --clr-surface-alt: #f1f5f9; /* alternierende Sections */ --clr-border: #e2e8f0; /* Linien, Rahmen (Slate-200) */ --clr-dark: #0f172a; /* Fast-Schwarz (Slate-900) */ /* ── Text ─────────────────────────────────────────────────── */ --clr-text: #1e293b; /* Haupttext (Slate-800) */ --clr-text-muted: #64748b; /* Dezenter Text (Slate-500) */ --clr-text-inv: #ffffff; /* Text auf dunklem Hintergrund */ /* ── Schriften ─────────────────────────────────────────────── Google Fonts werden im jeder HTML-Datei geladen. Fallbacks greifen wenn Fonts noch nicht geladen sind. */ --font-display: 'Outfit', 'Arial Black', sans-serif; /* Headings */ --font-body: 'Inter', 'Helvetica Neue', sans-serif; /* Body */ /* ── Abstände (8-Punkt-Grid) ─────────────────────────────── */ --sp-xs: 0.5rem; /* 8px */ --sp-sm: 1rem; /* 16px */ --sp-md: 1.5rem; /* 24px */ --sp-lg: 2.5rem; /* 40px */ --sp-xl: 4rem; /* 64px */ --sp-2xl: 6rem; /* 96px */ /* ── Layout ─────────────────────────────────────────────── */ --max-width: 1180px; /* ── Schatten ────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(15,118,110,.07); --shadow-md: 0 6px 24px rgba(15,118,110,.11); --shadow-lg: 0 16px 48px rgba(15,118,110,.15); --shadow-card: 0 4px 20px rgba(15,118,110,.09); /* ── Radien ─────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* ── Transitions ────────────────────────────────────────── */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --transition: 260ms var(--ease); }