/* ===================================================================== * Flanör v2 — Design tokens * * Two themes share the same component CSS via custom properties: * 1. Light (default) — white surfaces, teal primary, warm orange. * Inspired by roofnetwork.app (light landing). * 2. Dark — pure black surfaces, vibrant lime green * primary, white headings. Inspired by roofnetwork.app (dark mode). * * Theme is set on . An inline script in every * layout reads localStorage / prefers-color-scheme to set this before * paint, eliminating FOUC. * ===================================================================== */ /* ---------- Default = light ---------- */ :root { /* Surfaces */ --bg: #FAFAF7; --surface: #FFFFFF; --surface-2: #F5F5F0; --surface-3: #EDEDE5; /* Ink (on light) */ --ink-1: #0F172A; --ink-2: #334155; --ink-3: #64748B; --ink-4: #94A3B8; --ink-5: #CBD5E1; /* Lines */ --line: #E5E7EB; --line-2: #D1D5DB; /* Primary — teal */ --primary: #0EA5A4; --primary-600: #0D9488; --primary-50: #ECFDF5; --primary-rgb: 14, 165, 164; --on-primary: #FFFFFF; /* Accent — warm orange */ --accent: #F97316; --accent-600: #EA580C; --accent-50: #FFF7ED; --accent-rgb: 249, 115, 22; /* Ink rgb triplets — for rgba() composition (overlays, gradients) */ --ink-3-rgb: 100, 116, 139; /* Status */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #0284C7; /* Type */ --sans: 'Inter', 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Radius */ --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-pill: 999px; /* Shadows — soft on light */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); /* Focus ring */ --ring: 0 0 0 3px rgba(var(--primary-rgb), 0.22); /* Hero background ambient */ --hero-glow-1: rgba(14, 165, 164, 0.10); --hero-glow-2: rgba(249, 115, 22, 0.06); } /* ---------- Dark theme override ---------- */ [data-theme="dark"] { /* Surfaces — true black, slight warm tint */ --bg: #0A0A0B; --surface: #141416; --surface-2: #1C1C1F; --surface-3: #25252A; /* Ink — high contrast on black */ --ink-1: #FFFFFF; --ink-2: #D4D4D8; --ink-3: #A1A1AA; --ink-4: #71717A; --ink-5: #52525B; /* Lines — barely-there */ --line: #232326; --line-2: #34343A; /* Primary — vibrant lime green (the roof signature) */ --primary: #7CE85B; --primary-600: #6FDE4D; --primary-50: rgba(124, 232, 91, 0.10); --primary-rgb: 124, 232, 91; --on-primary: #0A0A0B; /* dark text on bright green */ /* Accent — warmer orange that survives black */ --accent: #FB923C; --accent-600: #F97316; --accent-50: rgba(251, 146, 60, 0.10); --accent-rgb: 251, 146, 60; /* Ink rgb triplets — slightly higher value for visibility on black */ --ink-3-rgb: 161, 161, 170; /* Status — adjusted for dark contrast */ --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --info: #38BDF8; /* Shadows — deeper, no light bleed */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.60), 0 6px 14px rgba(0, 0, 0, 0.40); --ring: 0 0 0 3px rgba(var(--primary-rgb), 0.25); --hero-glow-1: rgba(124, 232, 91, 0.10); --hero-glow-2: rgba(251, 146, 60, 0.05); } /* Honor user's system preference if no explicit choice has been made. The inline FOUC script always sets [data-theme] before paint, so this only kicks in for very early render or when JS is disabled. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } html, body { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Utilities */ .kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); font-weight: 600; margin: 0; } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .chip-teal { background: var(--primary-50); color: var(--primary-600); border-color: rgba(14, 165, 164, 0.2); } .chip-orange { background: var(--accent-50); color: var(--accent-600); border-color: rgba(249, 115, 22, 0.2); }