/* ========================================================================== Follery Design Tokens Single Source of Truth fuer Farben, Typografie, Spacing, Radien, Schatten. Siehe docs/design-system.md. Dark-Mode ist vorbereitet (siehe unten), aber noch nicht aktiv. ========================================================================== */ :root { /* --- Farben: Marke --- */ --color-primary: #2BB4C4; --color-primary-dark: #16707C; --color-primary-contrast: #0B1517; /* Textfarbe auf Tuerkis-Flaechen */ /* --- Farben: Flaechen & Text --- */ --color-bg: #F4F8F9; /* kuehles Off-White */ --color-surface: #FFFFFF; --color-text: #0B1517; /* Tiefsee */ --color-text-muted: #5E7173; --color-border: #DDE6E7; /* --- Farben: Status --- */ --color-success: #107A52; --color-success-soft: #E7F5EE; --color-warning: #E59500; --color-warning-soft: #FCEFD6; --color-danger: #E5484D; --color-danger-soft: #FBE3E4; --color-info-soft: #E8F6F8; /* Follery Nebel */ /* --- Typografie: Schriftfamilien --- */ --font-heading: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-accent: 'Caveat Brush', 'Comic Sans MS', cursive; /* --- Typografie: Type-Scale --- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 2rem; /* 32 */ --text-3xl: 3rem; /* 48 */ --leading-tight: 1.2; --leading-normal: 1.6; /* --- Spacing-Skala --- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ /* --- Radien --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-full: 999px; /* --- Schatten --- */ --shadow-sm: 0 2px 8px rgba(11, 21, 23, 0.06); --shadow-md: 0 6px 18px rgba(11, 21, 23, 0.12); --shadow-lg: 0 10px 24px rgba(11, 21, 23, 0.18); /* --- Layout --- */ --container-max: 1120px; --breakpoint-mobile: 640px; --breakpoint-tablet: 1024px; } /* -------------------------------------------------------------------------- Dark-Mode (vorbereitet, NOCH NICHT aktiv). Aktivierung spaeter ueber ODER, falls gewuenscht, per @media (prefers-color-scheme: dark). Werte sind Platzhalter und werden beim Dark-Mode-Rollout final abgestimmt (siehe docs/design-system.md, 2.). -------------------------------------------------------------------------- [data-theme="dark"] { --color-bg: #0B1517; --color-surface: #122023; --color-text: #F4F8F9; --color-text-muted: #9FB1B3; --color-border: #243437; } */