/* ============================================================================= ResellEngine Aurora Glass — Design Tokens Dark-first, glass morphism. Derived from landing site + iOS app screens. ============================================================================= */ :root { /* ---- BRAND (gradient poles) ---- */ --re-blue: #6F7EFF; /* primary — headline gradient start, CTA start */ --re-cyan: #7FD7FF; /* primary — headline gradient end, CTA end */ --re-gradient: linear-gradient(135deg, #6F7EFF 0%, #7FD7FF 100%); /* ---- SURFACES / DARKS ---- */ --re-bg: #0A0E1A; /* page canvas — near-black navy */ --re-bg-elevated: #0E1322; /* slightly raised surface */ --re-bg-phone: #111111; /* iPhone bezel fill */ --re-bg-phone-notch:#000000; /* notch / Dynamic Island fill */ /* ---- GLASS (semi-transparent whites on dark) ---- */ --re-card: rgba(255, 255, 255, 0.03); --re-card-hover: rgba(255, 255, 255, 0.05); --re-card-strong: rgba(255, 255, 255, 0.07); /* nested cards, inputs */ --re-border: rgba(255, 255, 255, 0.06); --re-border-hover: rgba(255, 255, 255, 0.10); /* ---- TEXT ---- */ --re-fg: #F5F5F7; /* body / primary */ --re-fg-2: rgba(255, 255, 255, 0.55); /* secondary / subhead */ --re-fg-3: rgba(255, 255, 255, 0.35); /* tertiary / placeholder */ /* ---- SEMANTIC ACCENTS (sampled from app screens) ---- */ --re-success: #4ADE80; /* green checkmarks — "Erfolgreich" */ --re-success-bg: rgba(74, 222, 128, 0.12); --re-warn: #D4A574; /* amber — "Erweiterte Marktanalyse" label */ --re-warn-bg: rgba(212, 165, 116, 0.10); --re-pill-blue: rgba(111, 126, 255, 0.22); /* selected pill fill (balanced) */ /* ---- ATMOSPHERIC GLOWS (always blurred, very low alpha) ---- */ --re-glow-blue: rgba(111, 126, 255, 0.07); --re-glow-cyan: rgba(127, 215, 255, 0.04); /* ---- RADII ---- */ --re-radius-xs: 4px; --re-radius-sm: 8px; --re-radius-md: 16px; /* cards */ --re-radius-lg: 24px; --re-radius-xl: 32px; /* large containers / CTA shell */ --re-radius-pill: 999px; /* buttons, inputs, chips */ --re-radius-phone: 42px; /* iPhone bezel */ /* ---- SPACING (8-pt baseline) ---- */ --re-space-1: 4px; --re-space-2: 8px; --re-space-3: 12px; --re-space-4: 16px; --re-space-5: 20px; --re-space-6: 24px; --re-space-8: 32px; --re-space-10: 40px; --re-space-12: 48px; --re-space-16: 64px; --re-space-20: 80px; /* ---- SHADOWS & ELEVATION ---- */ --re-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --re-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.10); --re-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.25); --re-shadow-glow: 0 4px 20px rgba(111, 126, 255, 0.30); --re-shadow-glow-hi:0 6px 28px rgba(111, 126, 255, 0.45); --re-inner-hairline:inset 0 0 0 1px rgba(255, 255, 255, 0.06); /* ---- BLUR ---- */ --re-blur-nav: 20px; /* frosted nav */ --re-blur-glow-sm: 30px; --re-blur-glow-md: 40px; --re-blur-glow-lg: 60px; /* ---- MOTION ---- */ --re-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* signature easing */ --re-dur-fast: 0.15s; /* button :active */ --re-dur-base: 0.3s; /* hover / color */ --re-dur-reveal: 0.7s; /* reveal cascade */ /* ---- TYPOGRAPHY ---- */ --re-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --re-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Base scale — clamp()ed for responsive — mirrors landing site exactly */ --re-type-h1: clamp(2.5rem, 6vw, 4rem); /* 40 → 64 */ --re-type-h2: clamp(1.75rem, 4vw, 2.75rem); /* 28 → 44 */ --re-type-h3: 1.2rem; /* 19.2 */ --re-type-body-lg: 1.15rem; /* 18.4 — hero sub */ --re-type-body: 1rem; /* 16 */ --re-type-body-sm: 0.95rem; /* 15.2 — UI text */ --re-type-caption: 0.85rem; /* 13.6 — badges */ --re-type-micro: 0.8rem; /* 12.8 — footer */ --re-weight-regular:400; --re-weight-medium: 500; --re-weight-semibold:600; --re-weight-bold: 700; --re-weight-black: 800; /* used for H1 and display stat values */ --re-leading-tight: 1.08; /* H1 */ --re-leading-snug: 1.15; /* H2 */ --re-leading-body: 1.6; /* body */ --re-leading-loose: 1.7; /* long-form paragraphs */ --re-tracking-tight:-0.03em;/* H1 */ --re-tracking-snug: -0.02em;/* H2 */ --re-tracking-normal:0; } /* ============================================================================= Semantic type classes — use these directly in markup ============================================================================= */ .re-h1 { font-family: var(--re-font-sans); font-size: var(--re-type-h1); font-weight: var(--re-weight-black); line-height: var(--re-leading-tight); letter-spacing: var(--re-tracking-tight); color: var(--re-fg); } .re-h2 { font-family: var(--re-font-sans); font-size: var(--re-type-h2); font-weight: var(--re-weight-bold); line-height: var(--re-leading-snug); letter-spacing: var(--re-tracking-snug); color: var(--re-fg); } .re-h3 { font-family: var(--re-font-sans); font-size: var(--re-type-h3); font-weight: var(--re-weight-semibold); line-height: 1.3; color: var(--re-fg); } .re-body { font-family: var(--re-font-sans); font-size: var(--re-type-body); line-height: var(--re-leading-body); color: var(--re-fg); } .re-body-lg { font-family: var(--re-font-sans); font-size: var(--re-type-body-lg); line-height: var(--re-leading-loose); color: var(--re-fg-2); } .re-caption { font-family: var(--re-font-sans); font-size: var(--re-type-caption); font-weight: var(--re-weight-semibold); letter-spacing: 0.01em; color: var(--re-fg-2); } .re-micro { font-family: var(--re-font-sans); font-size: var(--re-type-micro); color: var(--re-fg-3); } .re-gradient-text { background: var(--re-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .re-mono { font-family: var(--re-font-mono); }