/* ============================================================ Lumwe Design System — Color & Type Foundations Lumwe /LOOM-way/ · "The success engine for the ambitious." Operating brand of 17866381 Canada Inc., Québec, Canada TWO THEMES share one token set: • LIGHT (default) — the marketing site in its clean, cool gray + white-card form (iOS-aligned, like the apps). DEFAULT on :root. • DARK — opt in on the element (site-wide switch) or on any section with class="platform" or [data-theme="dark"] (immersive bands: hero, cover, footer). Deep ink, ambient cyan light, glass surfaces. The 5 values (the brand spine) run along one cyan→indigo ramp: L Lift=teal · U Unlock=cyan · M Make=azure · W Widen=blue · E Elevate=indigo. ============================================================ */ /* ---- Fonts: Apple-native faces, no uploads, no webfont requests. Sans → SF Pro (fallback: native system stack) Serif → New York (fallback: Georgia) CJK → PingFang SC (woven into every stack) Mono → SF Mono (fallback: ui-monospace) ---- */ :root { /* ============================================================ BRAND SPECTRUM — the 5 logo colors == the 5 values (saturated "core" + the iOS-tuned product hue beside it) ============================================================ */ --lift: #0B9E8A; /* L · teal (deep enough for light bg) */ --unlock: #0A93A8; /* U · cyan */ --make: #0E7FB0; /* M · azure */ --widen: #2E6BE6; /* W · blue */ --elevate: #5B5BD6; /* E · indigo */ /* legacy aliases (older markup referenced the old spectrum) */ --defy: var(--lift); --pursue: var(--unlock); --shape: var(--make); --thrive: var(--widen); --impact: var(--elevate); /* ============================================================ PRODUCT CATEGORY PALETTE (iOS-aligned, from the real apps) Each hue: solid + a ~14% tint for icon tiles / stat cards. ============================================================ */ --c-blue: #0A84FF; --c-blue-tint: #E5F1FF; --c-green: #34C759; --c-green-tint: #E4F8EA; --c-orange: #FF9F0A; --c-orange-tint: #FFF1DC; --c-red: #FF3B30; --c-red-tint: #FFE6E4; --c-purple: #AF52DE; --c-purple-tint: #F5E8FB; --c-pink: #FF2D92; --c-pink-tint: #FFE3F0; --c-cyan: #32ADE6; --c-cyan-tint: #E3F4FC; --c-teal: #00C7BE; --c-teal-tint: #DCF7F5; --c-indigo: #5856D6; --c-indigo-tint: #E8E8FA; --c-yellow: #FFCC00; --c-yellow-tint: #FFF6D6; /* ============================================================ PLATFORM ACCENTS (dark tier — the deep-cyan ramp) ============================================================ */ --cyan-400: #0A93A8; /* brand signature — deep cyan (light bg) */ --cyan-300: #0E7F96; /* accent text on light */ --cyan-600: #067383; /* pressed / hover on light */ /* Ink — dark substrate (platform) */ --ink-950: #06090F; --ink-900: #0A0E16; --ink-850: #0E131D; --ink-800: #121826; --ink-750: #161D2B; --ink-700: #1E2738; --ink-600: #2A3548; /* Slate — cool neutrals (text, lines, light backgrounds) */ --slate-950: #0B0F17; --slate-900: #131925; --slate-800: #1F2837; --slate-700: #334053; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #C2CCD8; --slate-200: #DDE3EB; --slate-150: #E7ECF2; --slate-100: #F1F4F8; --slate-50: #F6F8FB; /* ============================================================ TYPE — FAMILIES & SCALE (Apple-native; native fallbacks) ============================================================ */ /* Western Sans → SF Pro, then the standard native system stack */ --font-sans: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif; /* Serif → New York, then Georgia; PingFang/Songti for CJK */ --font-serif: 'New York', ui-serif, 'Iowan Old Style', Georgia, 'PingFang SC', 'Songti SC', serif; /* Mono → SF Mono, then ui-monospace */ --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Code', monospace; /* Display (large headlines) → SF Pro Display, heavy weights */ --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; /* Back-compat aliases (older kit CSS referenced these) */ --font-system: var(--font-sans); --font-grotesk: var(--font-sans); --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 21px; --text-xl: 26px; --text-2xl: 33px; --text-3xl: 40px; --text-4xl: 52px; --text-5xl: 70px; --text-6xl: 96px; --leading-none: 0.96; --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.42; --leading-relaxed: 1.6; --tracking-tightest: -0.03em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-label: 0.14em; /* ============================================================ SPACING — 4px base ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px; /* ============================================================ RADII ============================================================ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-3xl: 34px; --radius-pill: 999px; /* ============================================================ MOTION ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ============================================================ SEMANTIC TOKENS — DEFAULT = LIGHT (the marketing site) Components reference ONLY these; the .platform / dark band remaps them wholesale. ============================================================ */ --bg: #EEF1F5; /* cool light app background */ --bg-2: #E7ECF2; --surface: #FFFFFF; /* card */ --surface-2: #F4F6F9; /* inset chip / nested fill */ --surface-hover:#F1F4F8; --border: rgba(11,15,23,0.07); --border-strong: rgba(11,15,23,0.12); --hairline: rgba(11,15,23,0.06); --fg: #0B0F17; /* primary text (near-black) */ --fg-2: #5D6A7C; /* secondary text */ --fg-3: #8A96A8; /* tertiary / captions */ --fg-on-accent:#FFFFFF; --brand: var(--unlock); --brand-2: var(--make); --success: #1F9D55; --warning: #C47E0A; --danger: #D64545; --shadow-sm: 0 1px 3px rgba(16,28,52,0.06); --shadow-md: 0 8px 26px rgba(16,28,52,0.08); --shadow-lg: 0 22px 54px rgba(16,28,52,0.14); --ring: 0 0 0 4px rgba(10,147,168,0.18); --glow: 0 0 0 1px rgba(10,147,168,0.16), 0 0 26px -6px rgba(10,147,168,0.28); --btn-radius: var(--radius-md); --card-radius: var(--radius-2xl); /* iOS soft cards (28px) */ /* tints used by icon tiles — light, soft washes */ --c-blue-tint: #E5F1FF; --c-green-tint: #E4F8EA; --c-orange-tint: #FFF1DC; --c-red-tint: #FFE6E4; --c-purple-tint: #F5E8FB; --c-pink-tint: #FFE3F0; --c-cyan-tint: #E3F4FC; --c-teal-tint: #DCF7F5; --c-indigo-tint: #E8E8FA; --c-yellow-tint: #FFF6D6; } /* ============================================================ DARK THEME — opt in site-wide (html[data-theme="dark"]) or per-section (.platform / [data-theme="dark"] band). The full semantic set remaps to deep ink + glass. ============================================================ */ .platform, [data-theme="dark"] { color: var(--fg); --lift: #2FE3C8; --unlock: #15CFE8; --make: #3BA8FF; --widen: #5B8CFF; --elevate: #8A7BFF; --cyan-400: #15CFE8; /* platform signature accent — electric cyan */ --cyan-300: #5BE6F5; --cyan-600: #0A93A8; --bg: #050608; /* page — near black */ --bg-2: #0A0C10; /* alternating band */ --surface: rgba(255,255,255,0.035); /* glass card */ --surface-2: rgba(255,255,255,0.055); /* inset chip */ --surface-hover: rgba(255,255,255,0.075); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --hairline: rgba(255,255,255,0.06); --fg: #F4F7FA; /* primary text */ --fg-2: #9AA6B6; /* secondary text */ --fg-3: #67738A; /* tertiary / captions */ --fg-on-accent:#04222A; --brand: var(--cyan-400); --brand-2: var(--elevate); --success: #34D17E; --warning: #FFB838; --danger: #FF6B83; --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.5); --shadow-lg: 0 28px 70px rgba(0,0,0,0.6); --ring: 0 0 0 3px rgba(21,207,232,0.35); --glow: 0 0 0 1px rgba(21,207,232,0.25), 0 0 32px -4px rgba(21,207,232,0.4); --btn-radius: var(--radius-pill); --card-radius: 18px; /* tints used by icon tiles — dark-safe translucent washes */ --c-blue-tint: rgba(59,168,255,0.13); --c-green-tint: rgba(47,227,200,0.13); --c-orange-tint: rgba(255,184,56,0.13); --c-red-tint: rgba(255,107,131,0.13); --c-purple-tint: rgba(138,123,255,0.14); --c-pink-tint: rgba(255,45,146,0.13); --c-cyan-tint: rgba(21,207,232,0.13); --c-teal-tint: rgba(0,199,190,0.13); --c-indigo-tint: rgba(88,86,214,0.16); --c-yellow-tint: rgba(255,204,0,0.13); } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ /* Product (default): SF-native large bold titles */ .ds-title-xl { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .ds-title { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .ds-headline { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg); } .ds-h { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg); } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); } .ds-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); } .ds-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-3); } /* Eyebrow / section label — uppercase tracked */ .ds-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-3); } /* Big metric number */ .ds-metric { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--fg); } /* Platform: condensed industrial display */ .ds-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: var(--leading-none); letter-spacing: var(--tracking-snug); text-transform: uppercase; color: var(--fg); } .ds-display-h{ font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); text-transform: uppercase; color: var(--fg); } .ds-label { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); } .ds-data { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--fg); }