/* ============================================================ 4LABS DESIGN SYSTEM — TOKENS Version: 1.0.0 Three-state theme: auto (system) | light | dark Auto mode inherits from system preference. User can override via [data-theme] on . ============================================================ */ /* === RESET & BASE === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === THEME TOKENS === */ /* --- DARK THEME (applied when system prefers dark, or explicit dark) --- */ :root, [data-theme="dark"] { --color-bg: #0A0A0F; --color-bg-rgb: 10, 10, 15; --color-surface-1: #12121A; --color-surface-2: #1A1A25; --color-surface-3: #222230; --color-surface-glass: rgba(18, 18, 26, 0.72); --color-border: rgba(255, 255, 255, 0.08); --color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-accent: rgba(255, 59, 48, 0.3); --color-text-primary: #F5F5F7; --color-text-secondary: #9898A8; --color-text-tertiary: #7E7E8F; --color-text-inverse: #0A0A0F; --color-text-on-accent: #FFFFFF; --color-accent: #FF3B30; --color-accent-rgb: 255, 59, 48; --color-accent-hover: #FF5147; --color-accent-active: #E8342A; --color-accent-subtle: rgba(255, 59, 48, 0.12); --color-accent-glow: rgba(255, 59, 48, 0.25); --color-accent-glow-strong: rgba(255, 59, 48, 0.4); --color-accent-alpha-10: rgba(255, 59, 48, 0.1); --color-success: #34C759; --color-success-subtle: rgba(52, 199, 89, 0.12); --color-warning: #FFD60A; --color-warning-subtle: rgba(255, 214, 10, 0.12); --color-error: #FF453A; --color-error-subtle: rgba(255, 69, 58, 0.12); --color-info: #5AC8FA; --color-info-subtle: rgba(90, 200, 250, 0.12); /* Shadows & Glows (dark uses glows) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-xl: 0 16px 48px rgba(0,0,0,0.7); --shadow-glow: 0 0 20px rgba(255,59,48,0.15); --shadow-glow-strong: 0 0 40px rgba(255,59,48,0.15); --shadow-glow-cta: 0 2px 12px rgba(255,59,48,0.2); --shadow-card: 0 1px 4px rgba(0,0,0,0.2); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35); /* Glass */ --glass-bg: rgba(18, 18, 26, 0.72); --glass-border: rgba(255, 255, 255, 0.06); --glass-blur: 20px; --glass-saturate: 180%; /* Liquid Glass — Apple iOS 26 style Ultra-thin translucent surfaces; white overlay brightens background; backdrop brightness + saturation create vibrancy; thin luminous borders are the main visual cue. */ --lg-bg-1: rgba(255, 255, 255, 0.04); --lg-bg-2: rgba(255, 255, 255, 0.07); --lg-bg-3: rgba(255, 255, 255, 0.11); --lg-blur-1: 8px; --lg-blur-2: 12px; --lg-blur-3: 16px; --lg-saturate: 1.4; --lg-brightness: 1.1; --lg-border: rgba(255, 255, 255, 0.10); --lg-border-luminous: rgba(255, 255, 255, 0.18); --lg-inset-highlight: inset 0 0.5px 0 rgba(255,255,255,0.25); --lg-edge-glow: 0 0 0 0.5px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.03); /* Overlay */ --overlay: rgba(0, 0, 0, 0.6); --overlay-heavy: rgba(0, 0, 0, 0.8); /* Logo */ --logo-filter: none; /* use light logo on dark bg */ color-scheme: dark; } /* --- LIGHT THEME (auto-detected via OS preference) --- Uses the same tokens as [data-theme="light"] below. This block handles users who haven't explicitly set a theme. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-bg: #FAFAFA; --color-bg-rgb: 250, 250, 250; --color-surface-1: #FFFFFF; --color-surface-2: #F5F5F7; --color-surface-3: #EEEEF0; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-border: rgba(0, 0, 0, 0.08); --color-border-subtle: rgba(0, 0, 0, 0.04); --color-border-accent: rgba(232, 52, 42, 0.25); --color-text-primary: #1A1A1F; --color-text-secondary: #6B6B7B; --color-text-tertiary: #9898A8; --color-text-inverse: #F5F5F7; --color-text-on-accent: #FFFFFF; --color-accent: #E8342A; --color-accent-rgb: 232, 52, 42; --color-accent-hover: #D42E24; --color-accent-active: #BF281F; --color-accent-subtle: rgba(232, 52, 42, 0.08); --color-accent-glow: rgba(232, 52, 42, 0.15); --color-accent-glow-strong: rgba(232, 52, 42, 0.25); --color-accent-alpha-10: rgba(232, 52, 42, 0.1); --color-success: #248A3D; --color-success-subtle: rgba(36, 138, 61, 0.08); --color-warning: #B25000; --color-warning-subtle: rgba(178, 80, 0, 0.08); --color-error: #D70015; --color-error-subtle: rgba(215, 0, 21, 0.08); --color-info: #0071E3; --color-info-subtle: rgba(0, 113, 227, 0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --shadow-glow: 0 0 20px rgba(232,52,42,0.08); --shadow-glow-strong: 0 0 40px rgba(232,52,42,0.1); --shadow-glow-cta: 0 2px 12px rgba(232,52,42,0.15); --shadow-card: 0 1px 3px rgba(0,0,0,0.06); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.1); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: 20px; --glass-saturate: 180%; /* Liquid Glass — Apple iOS 26 style */ --lg-bg-1: rgba(255, 255, 255, 0.50); --lg-bg-2: rgba(255, 255, 255, 0.60); --lg-bg-3: rgba(255, 255, 255, 0.72); --lg-blur-1: 6px; --lg-blur-2: 10px; --lg-blur-3: 14px; --lg-saturate: 1.3; --lg-brightness: 1.03; --lg-border: rgba(255, 255, 255, 0.50); --lg-border-luminous: rgba(255, 255, 255, 0.80); --lg-inset-highlight: inset 0 0.5px 0 rgba(255,255,255,0.95); --lg-edge-glow: 0 0 0 0.5px rgba(255,255,255,0.60), 0 0 10px rgba(0,0,0,0.03); --overlay: rgba(0, 0, 0, 0.4); --overlay-heavy: rgba(0, 0, 0, 0.6); --logo-filter: none; color-scheme: light; } } /* Explicit light theme override — references the same tokens as the @media (prefers-color-scheme: light) block above. Consolidated: [data-theme="light"] also matches that media query selector, so we only need this single explicit block for manual overrides. */ [data-theme="light"] { --color-bg: #FAFAFA; --color-bg-rgb: 250, 250, 250; --color-surface-1: #FFFFFF; --color-surface-2: #F5F5F7; --color-surface-3: #EEEEF0; --color-surface-glass: rgba(255, 255, 255, 0.72); --color-border: rgba(0, 0, 0, 0.08); --color-border-subtle: rgba(0, 0, 0, 0.04); --color-border-accent: rgba(232, 52, 42, 0.25); --color-text-primary: #1A1A1F; --color-text-secondary: #6B6B7B; --color-text-tertiary: #9898A8; --color-text-inverse: #F5F5F7; --color-text-on-accent: #FFFFFF; --color-accent: #E8342A; --color-accent-rgb: 232, 52, 42; --color-accent-hover: #D42E24; --color-accent-active: #BF281F; --color-accent-subtle: rgba(232, 52, 42, 0.08); --color-accent-glow: rgba(232, 52, 42, 0.15); --color-accent-glow-strong: rgba(232, 52, 42, 0.25); --color-success: #248A3D; --color-success-subtle: rgba(36, 138, 61, 0.08); --color-warning: #B25000; --color-warning-subtle: rgba(178, 80, 0, 0.08); --color-error: #D70015; --color-error-subtle: rgba(215, 0, 21, 0.08); --color-info: #0071E3; --color-info-subtle: rgba(0, 113, 227, 0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --shadow-glow: 0 0 20px rgba(232,52,42,0.08); --shadow-glow-strong: 0 0 40px rgba(232,52,42,0.1); --shadow-glow-cta: 0 2px 12px rgba(232,52,42,0.15); --shadow-card: 0 1px 3px rgba(0,0,0,0.06); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.1); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: 20px; --glass-saturate: 180%; /* Liquid Glass — Apple iOS 26 style */ --lg-bg-1: rgba(255, 255, 255, 0.50); --lg-bg-2: rgba(255, 255, 255, 0.60); --lg-bg-3: rgba(255, 255, 255, 0.72); --lg-blur-1: 6px; --lg-blur-2: 10px; --lg-blur-3: 14px; --lg-saturate: 1.3; --lg-brightness: 1.03; --lg-border: rgba(255, 255, 255, 0.50); --lg-border-luminous: rgba(255, 255, 255, 0.80); --lg-inset-highlight: inset 0 0.5px 0 rgba(255,255,255,0.95); --lg-edge-glow: 0 0 0 0.5px rgba(255,255,255,0.60), 0 0 10px rgba(0,0,0,0.03); --overlay: rgba(0, 0, 0, 0.4); --overlay-heavy: rgba(0, 0, 0, 0.6); --logo-filter: none; color-scheme: light; } /* === THEME TRANSITION (smooth dark/light toggle) === */ html { transition: background-color 0.4s ease, color 0.3s ease; } html.no-theme-transition, html.no-theme-transition * { transition: none !important; } /* === SPACING TOKENS === */ :root { --space-4xs: 2px; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; /* Section spacing */ --section-pad-y: clamp(64px, 10vw, 128px); --section-pad-x: clamp(16px, 5vw, 80px); --section-pad-x-lg: clamp(80px, 8vw, 120px); } /* === TYPOGRAPHY TOKENS === */ :root { --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-display: clamp(3.25rem, 5.5vw + 1rem, 5.75rem); --text-h1: clamp(2.5rem, 4vw + 1rem, 4.25rem); --text-h2: clamp(2rem, 3vw + 0.75rem, 3.25rem); --text-h3: clamp(1.5rem, 2vw + 0.5rem, 2.125rem); --text-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem); --text-body-lg: 1.175rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.8125rem; --text-overline: 0.75rem; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; } /* === RADIUS TOKENS === */ :root { --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; } /* === MOTION TOKENS === */ :root { --duration-instant: 0ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 1000ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-colors: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); --transition-transform: transform var(--duration-base) var(--ease-spring); --transition-opacity: opacity var(--duration-base) var(--ease-default); --transition-all: all var(--duration-base) var(--ease-default); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === Z-INDEX TOKENS === */ :root { --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-chat: 700; } /* === GRID TOKENS === */ :root { --grid-columns: 12; --grid-gutter: 24px; --grid-margin: clamp(16px, 5vw, 80px); --content-max: 1440px; --content-narrow: 960px; --content-wide: 1600px; } @media (max-width: 767px) { :root { --grid-columns: 4; --grid-gutter: 16px; --grid-margin: 16px; } } @media (min-width: 768px) and (max-width: 1023px) { :root { --grid-columns: 8; --grid-gutter: 24px; --grid-margin: 32px; } } @media (min-width: 1920px) { :root { --grid-gutter: 32px; --grid-margin: 120px; } } /* === INTERACTIVE TOKENS === */ :root { --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); --focus-ring-offset: 2px; --touch-target: 44px; --cursor-magnetic-radius: 100px; }