/*! * FUTUREAISPHERE Brand Tokens * Single Source of Truth fuer alle projektweiten Design-Tokens. * Aenderungen hier wirken auf alle Seiten, die brand-tokens.css einbinden. * * Einbindung in jeder HTML-Datei im : * * * Siehe FUTURE_BRAND_GOVERNANCE.md fuer Einsatzregeln. */ :root { /* ============================================ */ /* Brand Core */ /* ============================================ */ --brand-primary: #A3E635; --brand-primary-strong: #84CC16; --brand-primary-deep: #65A30D; --brand-primary-soft: rgba(163, 230, 53, 0.12); --brand-primary-border: rgba(163, 230, 53, 0.28); /* ============================================ */ /* Ink / Navy (Dark Ink Scale) */ /* ============================================ */ --brand-ink-950: #020617; --brand-ink-900: #0F172A; --brand-ink-800: #1E293B; /* ============================================ */ /* Surfaces */ /* ============================================ */ --surface-base: #FFFFFF; --surface-subtle: #F8FAFC; --surface-muted: #F1F5F9; --surface-elevated: rgba(255, 255, 255, 0.82); --surface-dark: #020617; /* ============================================ */ /* Text */ /* ============================================ */ --text-strong: #0F172A; --text-body: #334155; --text-muted: #64748B; --text-soft: #94A3B8; --text-inverse: #FFFFFF; /* ============================================ */ /* Borders */ /* ============================================ */ --border-subtle: #E2E8F0; --border-strong: #CBD5E1; /* ============================================ */ /* State Colors */ /* ============================================ */ --state-success: #16A34A; --state-warning: #F59E0B; --state-danger: #DC2626; --state-info: #0EA5E9; /* ============================================ */ /* Shadows */ /* ============================================ */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.05); --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12), 0 6px 18px rgba(15, 23, 42, 0.06); --shadow-glow: 0 10px 30px rgba(163, 230, 53, 0.18); /* ============================================ */ /* Radii */ /* ============================================ */ --radius-xs: 0.75rem; --radius-sm: 1rem; --radius-md: 1.25rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --radius-pill: 999px; /* ============================================ */ /* Fluid Spacing Scale */ /* ============================================ */ --space-2xs: clamp(0.5rem, 0.45rem + 0.15vw, 0.625rem); --space-xs: clamp(0.75rem, 0.65rem + 0.25vw, 1rem); --space-sm: clamp(1rem, 0.85rem + 0.35vw, 1.25rem); --space-md: clamp(1.5rem, 1.2rem + 0.6vw, 2rem); --space-lg: clamp(2rem, 1.7rem + 0.9vw, 3rem); --space-xl: clamp(3rem, 2.4rem + 1.6vw, 4.5rem); --space-2xl: clamp(4rem, 3.1rem + 2.2vw, 6rem); /* ============================================ */ /* Containers */ /* ============================================ */ --container: min(1200px, calc(100vw - 2 * var(--space-md))); --container-wide: min(1360px, calc(100vw - 2 * var(--space-md))); /* ============================================ */ /* Typography */ /* ============================================ */ --font-sans: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Arial, sans-serif; --font-ui: var(--font-sans); --font-system-fallback: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Fluid Type Scale (min ... preferred ... max) */ --step--1: clamp(0.875rem, 0.84rem + 0.12vw, 0.95rem); /* Meta, Labels */ --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* Body */ --step-1: clamp(1.125rem, 1.04rem + 0.35vw, 1.35rem); /* Lead */ --step-2: clamp(1.35rem, 1.16rem + 0.8vw, 1.8rem); /* H3 */ --step-3: clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem); /* H2 */ --step-4: clamp(2.4rem, 1.85rem + 2.4vw, 3.8rem); /* H1 Secondary */ --step-5: clamp(3rem, 2.2rem + 3.8vw, 5.5rem); /* H1 Hero */ /* Line Heights */ --line-tight: 1.1; --line-snug: 1.3; --line-normal: 1.5; --line-relaxed: 1.625; --line-loose: 1.75; /* Letter Spacing */ --tracking-tightest: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-widest: 0.1em; /* Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ============================================ */ /* Motion */ /* ============================================ */ --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 480ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============================================ */ /* Z-Index Scale */ /* ============================================ */ --z-base: 1; --z-raised: 10; --z-sticky: 40; --z-fixed: 50; --z-overlay: 60; --z-modal: 70; } /* ============================================ */ /* Brand Utility Classes */ /* ============================================ */ /* Logo Wordmark (Inline-SVG Fallback) */ .fais-wordmark { color: var(--text-strong); display: inline-block; height: 1.5em; width: auto; } .fais-wordmark-inverse { color: var(--text-inverse); } .fais-wordmark .fais-accent { fill: var(--brand-primary); } /* Brand Gradient Text */ .fais-gradient-text { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Brand CTA Button Base (kann projektweit genutzt werden) */ .fais-btn-cta { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%); color: var(--brand-ink-950); font-weight: var(--weight-bold); transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-standard); text-transform: none !important; letter-spacing: var(--tracking-wide); } .fais-btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .fais-btn-cta:active { transform: translateY(0) scale(0.98); } /* Focus Ring (Brand-konform) */ .fais-focus-ring:focus-visible, :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }