/* ============================================================ ONE4ALL — CSS Design Tokens Source of truth: ONE4ALL_Grid_System_Spec.md (grid/spacing) ONE4ALL_Phase3_Design_System_Part1.md (color/type) Version: 0.1.0 — Phase 0 Foundation ============================================================ */ :root { /* ---------------------------------------------------------- CONTAINERS Standard: 1200px | Wide: 1320px | Narrow: 780px Source: Grid System Spec §C ---------------------------------------------------------- */ --o4all-container: 1200px; --o4all-container-wide: 1320px; --o4all-container-narrow: 780px; /* ---------------------------------------------------------- GRID Source: Grid System Spec §C ---------------------------------------------------------- */ --o4all-grid-columns: 12; --o4all-grid-gap: 24px; /* Desktop gutter */ --o4all-grid-gap-tablet: 20px; /* Tablet component gap */ --o4all-grid-gap-mobile: 16px; /* Mobile gutter */ /* ---------------------------------------------------------- PAGE PADDING — horizontal padding inside containers on smaller viewports where max-width is not reached. Source: Grid System Spec §C ---------------------------------------------------------- */ --o4all-page-padding: 22px; /* Desktop fallback */ --o4all-page-padding-tablet: 32px; --o4all-page-padding-mobile: 20px; --o4all-page-padding-small: 16px; /* ---------------------------------------------------------- SECTION SPACING — vertical padding per section block Source: Grid System Spec §C ---------------------------------------------------------- */ --o4all-section-y: 112px; /* Standard section */ --o4all-section-y-tight: 82px; /* Tight/compact section */ /* ---------------------------------------------------------- COMPONENT SPACING Source: Grid System Spec §C / Design System §7c ---------------------------------------------------------- */ --o4all-card-padding: 28px; /* Card internal padding — desktop */ --o4all-card-padding-mobile: 22px; /* Card internal padding — mobile */ --o4all-card-gap: 24px; /* Gap between cards in a grid */ --o4all-stack-gap: 16px; /* Gap between stacked elements */ --o4all-inline-gap: 12px; /* Gap between inline sibling elements */ /* ---------------------------------------------------------- HERO ---------------------------------------------------------- */ --o4all-hero-min-h: 90vh; /* Mobile: overridden to 80vh below */ /* ---------------------------------------------------------- PRIMARY BRAND COLORS Source: Design System §5a ---------------------------------------------------------- */ --o4all-color-ink: #0D1B2A; /* Hero, Footer, CTA — deepest dark */ --o4all-color-navy: #1A3350; /* Secondary dark sections, nav */ --o4all-color-steel: #2C5282; /* Hover states, form focus, badges */ --o4all-color-accent: #C9A84C; /* Gold — CTAs, icons, trust badges */ --o4all-color-accent-light: #E8C97A; /* Hover on accent (dark backgrounds) */ --o4all-color-accent-dark: #9A7A2E; /* Active/pressed state on accent */ /* ---------------------------------------------------------- BACKGROUND COLORS Source: Design System §5b ---------------------------------------------------------- */ --o4all-bg-page: #F7F8FA; /* Main page background — warm off-white */ --o4all-bg-white: #FFFFFF; /* Cards, forms, white sections */ --o4all-bg-subtle: #EEF0F4; /* Soft alternate sections (Stats, FAQ) */ --o4all-bg-dark: #0D1B2A; /* Alias for ink — dark section backgrounds */ /* ---------------------------------------------------------- BORDER COLORS ---------------------------------------------------------- */ --o4all-border: #D1D8E0; /* Card and input borders */ --o4all-border-dark: #2A3F55; /* Borders on dark backgrounds */ /* ---------------------------------------------------------- TEXT COLORS Source: Design System §5b ---------------------------------------------------------- */ --o4all-text-primary: #0D1B2A; /* Main body text */ --o4all-text-secondary: #4A5568; /* Secondary copy, dates, captions */ --o4all-text-muted: #718096; /* Labels, helper text */ --o4all-text-inverse: #FFFFFF; /* Text on dark backgrounds */ --o4all-text-accent: #C9A84C; /* Highlighted text, links on dark bg */ /* ---------------------------------------------------------- ACCESSIBLE ON-LIGHT TEXT VARIANTS For small text/links sitting on white cards (--o4all-bg-white). The default muted (#718096 → 4.0:1) and accent (#C9A84C → 2.3:1) both fail WCAG AA (4.5:1) as text. These pass with margin. ---------------------------------------------------------- */ --o4all-text-muted-accessible: #5B6675; /* secondary/muted text on white — 5.8:1 */ --o4all-color-accent-text: #8A6A1E; /* gold link/CTA text on white — 5.0:1 */ /* Footer sits on --o4all-color-ink (#0D1B2A). Default muted (#718096 → 4.3:1) fails AA there; these scoped variants pass with margin. */ --o4all-footer-text-accessible: #8794A3; /* footer body/label text on ink — 5.6:1 */ --o4all-footer-link-accessible: #A6B2BF; /* footer links on ink — 8:1, brighter than text */ /* ---------------------------------------------------------- FUNCTIONAL / STATE COLORS Source: Design System §5c ---------------------------------------------------------- */ --o4all-success: #276749; --o4all-success-bg: #F0FFF4; --o4all-warning: #B7791F; --o4all-warning-bg: #FFFFF0; --o4all-danger: #C53030; --o4all-danger-bg: #FFF5F5; --o4all-info: #2B6CB0; /* ---------------------------------------------------------- TYPOGRAPHY — FONT FAMILIES Source: Design System §6 Font: Robout (self-hosted, DSGVO-konform) Files: assets/fonts/robout/Robout.woff2 + .woff ---------------------------------------------------------- */ --o4all-font-heading: "Robout", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --o4all-font-body: "Robout", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---------------------------------------------------------- TYPOGRAPHY — FONT SIZES (desktop) Source: Design System §6b ---------------------------------------------------------- */ --o4all-type-display: 4.5rem; /* 72px — Hero H1 only */ --o4all-type-h1: 3.5rem; /* 56px — Inner-page H1 */ --o4all-type-h2: 2.5rem; /* 40px — Section headings */ --o4all-type-h3: 1.75rem; /* 28px — Sub-headings */ --o4all-type-h4: 1.375rem; /* 22px — Card titles, FAQ */ --o4all-type-body-lg: 1.25rem; /* 20px — Hero subheading, intro text */ --o4all-type-body: 1rem; /* 16px — Body copy */ --o4all-type-small: 0.875rem; /* 14px — Captions, footnotes */ --o4all-type-xs: 0.75rem; /* 12px — Trust badges, legal micro */ --o4all-type-button: 1rem; /* 16px — Button labels */ --o4all-type-label: 0.8125rem; /* 13px — Form labels, nav items */ --o4all-type-nav: 0.9375rem; /* 15px — Navigation links */ /* ---------------------------------------------------------- TYPOGRAPHY — LINE HEIGHTS & LETTER SPACING Larger leading is critical for German compound words. ---------------------------------------------------------- */ --o4all-leading-tight: 1.2; --o4all-leading-heading: 1.3; --o4all-leading-body: 1.7; /* Required for German readability */ --o4all-tracking-heading: -0.02em; /* Tighter for large headings */ --o4all-tracking-label: 0.05em; /* Wider for uppercase labels */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --o4all-radius-sm: 4px; --o4all-radius-btn: 6px; --o4all-radius-input: 6px; --o4all-radius-card: 10px; /* ---------------------------------------------------------- SHADOWS ---------------------------------------------------------- */ --o4all-shadow-card: 0 2px 12px rgba(13, 27, 42, 0.08); --o4all-shadow-card-hover: 0 8px 28px rgba(13, 27, 42, 0.14); --o4all-shadow-nav: 0 2px 16px rgba(13, 27, 42, 0.12); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --o4all-transition: 200ms ease; --o4all-transition-slow: 350ms ease; /* ---------------------------------------------------------- Z-INDEX SCALE ---------------------------------------------------------- */ --o4all-z-base: 1; --o4all-z-dropdown: 100; --o4all-z-nav: 200; --o4all-z-overlay: 300; --o4all-z-modal: 400; --o4all-z-toast: 500; } /* ---------------------------------------------------------- TABLET OVERRIDES (≤ 1023px) Source: Grid System Spec §C ---------------------------------------------------------- */ @media (max-width: 1023px) { :root { --o4all-section-y: 82px; --o4all-section-y-tight: 64px; --o4all-grid-gap: 20px; --o4all-page-padding: 32px; } } /* ---------------------------------------------------------- MOBILE OVERRIDES (≤ 767px) Source: Grid System Spec §C + Design System §6b ---------------------------------------------------------- */ @media (max-width: 767px) { :root { --o4all-section-y: 66px; --o4all-section-y-tight: 52px; --o4all-grid-gap: 16px; --o4all-page-padding: 20px; --o4all-card-padding: 22px; --o4all-hero-min-h: 80vh; /* Font size scale for mobile */ --o4all-type-display: 3rem; /* 48px */ --o4all-type-h1: 2.25rem; /* 36px */ --o4all-type-h2: 1.75rem; /* 28px */ --o4all-type-h3: 1.375rem; /* 22px */ --o4all-type-h4: 1.125rem; /* 18px */ --o4all-type-body-lg: 1.125rem; /* 18px */ } } /* ---------------------------------------------------------- SMALL MOBILE OVERRIDES (≤ 374px) Source: Grid System Spec §C ---------------------------------------------------------- */ @media (max-width: 374px) { :root { --o4all-page-padding: 16px; } }