/* ========================================================================== Ofira.app — Design Tokens (Single Source of Truth) Werte exakt aus dem Styleguide (Ofira-app_Styleguide.html, Stand 02.06.2026). REGEL: Außerhalb dieser Datei werden keine rohen Hex-/Pixel-Werte verwendet. Komponenten nutzen ausschließlich var(--token). ========================================================================== */ :root { /* --- Primitive: Navy-Skala (Anker #0F172A) --------------------------- */ --navy-950: #070B16; --navy-900: #0A0F1E; --navy-800: #0F172A; --navy-700: #3A4150; --navy-600: #616672; --navy-500: #8C9099; --navy-400: #ADB0B7; --navy-300: #CFD1D4; --navy-200: #E7E8EA; --navy-100: #F4F5F5; --navy-50: #FAFAFB; /* --- Primitive: Orange-Skala (Akzent #F1601D) ------------------------ */ --orange-900: #5C240B; --orange-800: #823410; --orange-700: #C95018; --orange-600: #CF5319; --orange-500: #F1601D; --orange-400: #F4834F; --orange-300: #F7A883; --orange-200: #FBCCB7; --orange-100: #FDE9DF; --orange-50: #FEF7F4; /* --- Primitive: Warmgrau-Skala --------------------------------------- */ --grey-900: #1C1B1A; --grey-800: #2C2A28; --grey-700: #6B6A68; --grey-600: #8D8C8B; --grey-500: #ABAAA9; --grey-400: #C4C3C3; --grey-300: #DDDDDD; --grey-200: #ECECEC; --grey-100: #F6F5F5; --grey-50: #FBFBFB; /* --- Semantische Farb-Tokens (nur diese in Komponenten verwenden) ---- */ --color-text-default: var(--navy-700); /* Fließtext, 10:1 auf Weiß */ --color-text-strong: var(--navy-800); /* Überschriften */ --color-text-muted: var(--grey-700); /* Labels, Kleintext */ --color-link: var(--orange-700); /* Links auf Weiß (>=4.5:1) */ --color-link-hover: var(--orange-600); --color-action: var(--orange-500); /* CTA-Fläche */ --color-action-hover: var(--orange-400); --color-action-label: var(--navy-800); /* Text auf CTA (kein Weiß!) */ --color-surface: #ffffff; --color-surface-muted: var(--grey-100); --color-page: var(--grey-50); --color-border: var(--navy-200); --color-border-strong: var(--navy-600); /* Formularränder (>=3:1) */ --color-focus: var(--orange-500); --color-on-dark: #ffffff; /* Text/Elemente auf Navy/Foto */ --border-on-dark: rgba(255, 255, 255, 0.55); /* Umriss auf dunkel */ --surface-on-dark: rgba(255, 255, 255, 0.10); /* Hover-Fläche auf dunkel */ /* --- Abstände (4px-Basis) -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Semantische Abstände (T-Shirt-Größen) — Aliase auf die Skala. IMMER diese in Komponenten/Utilities verwenden, nie rohe px. */ --space-2xs: var(--space-1); /* 4px */ --space-xs: var(--space-2); /* 8px */ --space-sm: var(--space-3); /* 12px */ --space-md: var(--space-4); /* 16px */ --space-lg: var(--space-5); /* 24px */ --space-xl: var(--space-6); /* 32px */ --space-2xl: var(--space-7); /* 48px */ --space-3xl: var(--space-8); /* 64px */ --space-4xl: var(--space-9); /* 96px */ --space-5xl: var(--space-10); /* 128px */ /* --- Radien (proportionale Skala, Faktor ~1.5–1.6) ------------------- xs 4 · sm 6 · md 10 · lg 16 · xl 24 · pill. Verbindlich: Mikro-Akzente=xs, Eingaben/Buttons=md, Karten/Medien=lg, große Showcase-Rahmen (Preis-Karte)=xl. Außerhalb keine rohen px-Radien. */ --radius-xs: 4px; /* Mikro-Akzente (Balken, Punkte, Linien) */ --radius-sm: 6px; /* Fokus-Ring */ --radius-md: 10px; /* Buttons, Eingaben */ --radius-lg: 16px; /* Karten, Medien */ --radius-pill: 999px; /* --- Typografie ------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Apple-orientiert: große, eng gesetzte Headlines (negatives Tracking), fluide Skalierung, ruhige Zeilenhöhe. */ --fs-hero: clamp(32px, 4.4vw, 48px); --lh-hero: 1.06; --ws-hero: -0.035em; /* Seiten-H1 */ --fs-hero-fluid: clamp(40px, 5.6vw, 68px); /* großer Hero, für Wucht */ --fs-h2: clamp(28px, 3vw, 40px); --lh-h2: 1.12; --ws-h2: -0.025em; --fs-h3: clamp(21px, 1.6vw, 26px); --lh-h3: 1.25; --ws-h3: -0.015em; --fs-body: 17px; --lh-body: 1.7; /* Fließtext */ --fs-note: 15px; --lh-note: 1.6; /* sekundäre Notizen, kleine Buttons */ --fs-small: 13px; --lh-small: 1.5; /* Labels */ --fs-mini: 12px; /* Micro-Labels/Badges */ --fs-lead: clamp(18px, 1.4vw, 21px); --lh-lead: 1.55; /* Intro-Text */ --ws-display: -0.04em; /* große, fette Display-Zahlen */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Hero/H1 */ --fw-bolder: 700; /* Display-Akzent (Preis) */ /* --- Layout ----------------------------------------------------------- */ --container-max: 1200px; /* Inhaltscontainer */ --measure: 72ch; /* Textspalte 60-75 Zeichen */ --gutter: var(--space-5); --gutter-mobile: var(--space-4); /* --- Breakpoints (Bootstrap-Werte) ----------------------------------- */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; /* --- Motion ----------------------------------------------------------- */ --motion-fast: 150ms; /* Hover/Focus */ --motion-medium: 240ms; /* Fade-in */ --motion-slow: 500ms; /* Bild-Reveal */ --motion-crossfade: 1200ms; /* Hero-Galerie-Überblendung */ --motion-float: 8s; /* schwebendes Mockup */ --motion-spin: 0.7s; /* Lade-Spinner */ --easing: cubic-bezier(0.2, 0, 0.2, 1); --stagger: 70ms; /* --- Elevation (weich, kühl, mehrschichtig) -------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05); --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, 0.18), 0 8px 20px -8px rgba(15, 23, 42, 0.10); --shadow-accent: 0 16px 32px -12px rgba(241, 96, 29, 0.18); --shadow-dark: 0 24px 48px -16px rgba(0, 0, 0, 0.55); /* Hover auf Navy */ --shadow-card: var(--shadow-sm); --shadow-sticky: 0 1px 0 0 var(--navy-200); /* --- Hintergrund-Atmosphäre (sehr dezent, kein „Gradient-Soup") ------ */ --glow-orange: rgba(241, 96, 29, 0.10); --glow-navy: rgba(15, 23, 42, 0.06); --glow-orange-strong: rgba(241, 96, 29, 0.16); /* Dark-Sektion: Hauptschein */ --glow-orange-soft: rgba(241, 96, 29, 0.08); /* Dark-Sektion: Gegenschein */ /* --- Bild-Behandlung (Duotone/Scrim, markenkohärent) ----------------- */ --radius-media: var(--radius-lg); --duotone-navy: rgba(15, 23, 42, 0.55); --duotone-navy-soft: rgba(15, 23, 42, 0.35); --scrim-bottom: linear-gradient(to top, rgba(7, 11, 22, 0.78) 0%, rgba(7, 11, 22, 0.28) 42%, transparent 72%); /* --- Stage: dunkle Premium-Bühne (Hero, Workflow, Preis-Anker) -------- Kontrastregel: Fließtext auf Stage min. navy-200 (~15:1), Kleintext <=15px min. navy-300 (~11:1). CTA-Label bleibt navy-800 auf Orange. */ --stage-bg: var(--navy-950); --stage-bg-grad: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%); --stage-surface: rgba(255, 255, 255, 0.045); /* Glas-Karten */ --stage-surface-2: rgba(255, 255, 255, 0.08); /* Hover / erhaben */ --stage-border: rgba(255, 255, 255, 0.09); /* Hairlines */ --stage-border-strong: rgba(255, 255, 255, 0.18); --stage-text: var(--navy-200); --stage-text-strong: #ffffff; --stage-text-muted: var(--navy-300); --stage-grid-line: rgba(255, 255, 255, 0.045); /* Hintergrund-Raster */ /* --- Verläufe (nur in .css referenziert, CSP-konform) ----------------- Headline-Verlauf NUR weiß->navy-300 (AA-sicher) — nie Orange-geclippt. */ --grad-brand: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-600) 100%); --grad-cta: linear-gradient(180deg, var(--orange-400) 0%, var(--orange-500) 100%); --grad-headline: linear-gradient(180deg, #ffffff 0%, var(--navy-300) 100%); --grad-hairline: linear-gradient(90deg, transparent, var(--stage-border-strong), transparent); --grad-hairline-accent: linear-gradient(90deg, transparent, rgba(241, 96, 29, 0.5), transparent); --grad-border-card: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 38%, rgba(241, 96, 29, 0.18) 100%); --grad-border-card-hover: linear-gradient(160deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08) 38%, rgba(241, 96, 29, 0.42) 100%); --glow-beam: radial-gradient(42% 36% at 50% 0%, rgba(241, 96, 29, 0.18) 0%, transparent 70%); /* Kühle Tiefe (Login-inspiriert): leuchtet aus dem Dunkel heraus */ --glow-stage-cool: rgba(50, 72, 140, 0.45); --glow-stage-cool-soft: rgba(50, 72, 140, 0.22); /* Aurora: große kühle Lichtkuppel oben + warme Marken-Halos (links tiefer/größer, bewusst asymmetrisch) + Lichtpool unter der Karte */ --glow-aurora: radial-gradient(95% 72% at 50% -10%, var(--glow-stage-cool) 0%, var(--glow-stage-cool-soft) 32%, transparent 60%), radial-gradient(64% 70% at 4% 70%, var(--glow-orange-strong) 0%, transparent 58%), radial-gradient(48% 54% at 88% 20%, var(--glow-orange-strong) 0%, transparent 60%), radial-gradient(72% 62% at 50% 118%, var(--glow-orange-strong) 0%, transparent 72%); /* Rahmen der Preis-Karte: konischer Verlauf, der das Aurora-Licht im Uhrzeigersinn aufnimmt — kühl oben (12 Uhr), warm rechts (2 Uhr) und unten (4–6 Uhr), am hellsten unten links (8 Uhr, großer Halo), zurück zu kühl (10–11 Uhr). */ --grad-border-price: conic-gradient(from 0deg at 50% 50%, rgba(125, 155, 235, 0.50) 0deg, /* 12 Uhr: kühl (Lichtkuppel) */ rgba(241, 96, 29, 0.38) 55deg, /* 2 Uhr: warm, gedämpft (rechter Halo) */ rgba(125, 155, 235, 0.14) 120deg, /* 4 Uhr: dunkel/neutral — kein Orange */ rgba(125, 155, 235, 0.14) 175deg, /* 6 Uhr: weiterhin neutral */ rgba(241, 96, 29, 0.46) 240deg, /* 8 Uhr: kräftigster Schein (großer Halo) */ rgba(125, 155, 235, 0.30) 300deg, /* 10 Uhr: kühl */ rgba(125, 155, 235, 0.50) 360deg); /* 12 Uhr: Kreis schließen */ /* --- Display-Typografie (Index-Hero, Preis-Anker) --------------------- */ --fs-display: clamp(42px, 6vw, 80px); --lh-display: 1.03; --ws-display-h: -0.045em; /* --- Stage-Tiefe & Form ------------------------------------------------ */ --radius-xl: 24px; /* Hero-Frames, große Media */ --shadow-stage: 0 40px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--stage-border); --shadow-float: 0 60px 120px -40px rgba(7, 11, 22, 0.55), 0 20px 40px -20px rgba(7, 11, 22, 0.4); --shadow-cta: 0 8px 24px -8px rgba(241, 96, 29, 0.45); --inset-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.28); /* --- Reveal-Motion (Expo-out, ruhig) ----------------------------------- */ --easing-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-reveal: 650ms; /* Sanfte ease-in-out-Kurve (verzögerter Anfang UND Ende) + Zoom-Dauer */ --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1); --motion-zoom: 480ms; } /* --- Dark Mode ------------------------------------------------------------- STATUS: INAKTIV. Greift nur bei :root[data-theme='auto'] — dieses Attribut wird derzeit nirgends gesetzt. Token-Set ist zudem unvollständig (u. a. --color-action, Schatten, Glows fehlen). Vor produktivem Einsatz: Attribut/ Umschalter setzen UND alle semantischen Tokens hier vervollständigen. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root[data-theme='auto'] { --color-text-default: var(--grey-100); --color-text-strong: #ffffff; --color-text-muted: var(--navy-400); --color-link: var(--orange-400); --color-link-hover: var(--orange-300); --color-surface: var(--navy-900); --color-surface-muted: var(--navy-800); --color-page: var(--navy-950); --color-border: var(--navy-700); --color-border-strong: var(--navy-500); } }