/* ═══════════════════════════════════════════════════ LEMON BROTHERS — Design Tokens v2 Refined, editorial dark UI ═══════════════════════════════════════════════════ */ :root { --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif; --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Outfit', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace; --fs-2xs: 0.625rem; /* 10px */ --fs-xs: 0.6875rem; /* 11px */ --fs-sm: 0.75rem; /* 12px */ --fs-base:0.8125rem; /* 13px */ --fs-md: 0.9375rem; /* 15px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --fs-3xl: 2.5rem; /* 40px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl:24px; --radius-full: 9999px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms; /* ── Liquid glass system: single blur scale for the whole UI ── */ --blur-sm: 12px; /* scrims, small chips */ --blur-md: 24px; /* cards, header, blocks */ --blur-lg: 40px; /* login card, modals */ --glass-saturate: 1.5; --z-sticky: 10; --z-overlay: 100; --z-modal: 1000; --z-wm: -1; } /* ═══ DARK (default) ═══ */ [data-theme="dark"] { color-scheme: dark !important; /* Backgrounds — deep blue-graphite so the glass always has tone */ --bg-0: #0b0d15; --bg-1: #0f0f13; --bg-2: rgba(22, 22, 25, 0.82); --bg-3: #1e1e23; --bg-4: #262629; /* Legacy flat glass (chips, inputs, faint fills) */ --glass: rgba(255,255,255,0.05); --glass-hover: rgba(255,255,255,0.08); --glass-active: rgba(255,255,255,0.11); --border: rgba(255,255,255,0.09); --border-hover: rgba(255,255,255,0.16); --border-focus: rgba(245,197,66,0.45); /* ─── LIQUID GLASS (visionOS) ─── The CARD is the glass: translucent dark tint + heavy blur that refracts the vivid ambient (orbs + lemon) behind the page. The BLOCK is just a minimal grouping frame — NO blur (single-level filter = real depth, fast, no nested-paint glitches). */ --pane-bg: rgba(255,255,255,0.018); --pane-filter: none; /* Card glass: light translucent FROST (visionOS dark material) — it brightens + frosts the colour behind, not darkens it. */ --tile-fill: linear-gradient(165deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.055) 100%); --tile-fill-hover: linear-gradient(165deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%); --glass-filter: blur(30px) saturate(180%); /* Refractive rim — bright lit top-left edge fading round the glass */ --glass-edge: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 26%, rgba(255,255,255,0.02) 58%, rgba(255,255,255,0.14) 100%); --glass-edge-hover: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.16) 26%, rgba(255,255,255,0.04) 58%, rgba(255,255,255,0.22) 100%); /* Block frame: hairline only, barely-there */ --shadow-pane: inset 0 1px 0 rgba(255,255,255,0.04); /* Card: bright specular top rim + soft float */ --shadow-card: inset 0 1px 0.5px rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.03), 0 2px 8px -2px rgba(0,0,0,0.35), 0 18px 44px -16px rgba(0,0,0,0.55); --shadow-card-hover: inset 0 1px 0.5px rgba(255,255,255,0.42), inset 0 0 0 1px rgba(255,255,255,0.05), 0 4px 12px -2px rgba(0,0,0,0.4), 0 26px 56px -16px rgba(0,0,0,0.62); --shadow-elevated: inset 0 1px 0.5px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.3), 0 40px 90px -28px rgba(0,0,0,0.72); /* Text — raised contrast so values never sink into the glass */ --t-1: rgba(255,255,255,0.98); --t-2: rgba(255,255,255,0.72); --t-3: rgba(255,255,255,0.54); --t-4: rgba(255,255,255,0.3); /* Brand accent — Lemon */ --accent: #f5c542; --accent-dim: rgba(245,197,66,0.12); --accent-glow: rgba(245,197,66,0.25); --accent-glow-lg: rgba(245,197,66,0.45); /* Semantic */ --green: #34d399; --green-dim: rgba(52,211,153,0.1); --green-glow: rgba(52,211,153,0.25); --yellow: #fbbf24; --yellow-dim:rgba(251,191,36,0.1); --yellow-glow: rgba(251,191,36,0.25); --red: #f87171; --red-dim: rgba(248,113,113,0.1); --red-glow: rgba(248,113,113,0.25); --blue: #60a5fa; --blue-dim: rgba(96,165,250,0.1); --blue-glow: rgba(96,165,250,0.25); --purple: #a78bfa; --purple-dim:rgba(167,139,250,0.1); --purple-glow: rgba(167,139,250,0.25); --pink: #f472b6; --pink-glow: rgba(244, 114, 182, 0.25); /* Gradients */ --gradient-accent: linear-gradient(90deg, #f5c542 0%, #e9a810 100%); --gradient-success: linear-gradient(90deg, #34d399 0%, #10b981 100%); --gradient-warning: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); --gradient-danger: linear-gradient(90deg, #f87171 0%, #ef4444 100%); --gradient-info: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%); --gradient-purple: linear-gradient(90deg, #a78bfa 0%, #8b5cf6 100%); /* Chart */ --chart-grid: rgba(255,255,255,0.04); --chart-text: rgba(255,255,255,0.38); /* Legacy compat */ --clr-bg-deep: var(--bg-0); --clr-bg-base: var(--bg-1); --clr-bg-raised: var(--bg-2); --clr-bg-elevated: var(--bg-3); --glass-bg: var(--glass); --glass-bg-hover: var(--glass-hover); --glass-border: var(--border); --glass-border-hover: var(--border-hover); --glass-shadow: 0 2px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04); --clr-text-primary: var(--t-1); --clr-text-secondary: var(--t-2); --clr-text-tertiary: var(--t-3); --clr-text-muted: var(--t-3); --clr-accent: var(--accent); --clr-accent-dim: var(--accent-dim); --clr-accent-glow: var(--accent-glow); --clr-success: var(--green); --clr-success-dim: var(--green-dim); --clr-warning: var(--yellow); --clr-warning-dim: var(--yellow-dim); --clr-danger: var(--red); --clr-danger-dim: var(--red-dim); --clr-info: var(--blue); --clr-info-dim: var(--blue-dim); --watermark-opacity: 0.08; --login-card-bg: #12121a; --login-card-border: rgba(255,255,255,0.06); --scrollbar-thumb: rgba(255,255,255,0.1); --scrollbar-track: transparent; } /* ═══ LIGHT ═══ */ [data-theme="light"] { color-scheme: light !important; --bg-0: #f9f6f0; --bg-1: #f4efe6; --bg-2: rgba(255, 255, 255, 0.75); --bg-3: #ffffff; --bg-4: #eae4d8; --glass: rgba(255, 255, 255, 0.75); --glass-hover: rgba(255, 255, 255, 0.88); --glass-active: rgba(255, 255, 255, 0.96); --border: rgba(27, 24, 22, 0.14); --border-hover: rgba(27, 24, 22, 0.24); --border-focus: rgba(179, 75, 34, 0.45); /* ─── LIQUID GLASS (light) ─── */ --pane-bg: rgba(244, 239, 230, 0.65); --pane-filter: none; /* Translucent frosted white — refracts the ambient tints behind */ --tile-fill: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.72) 100%); --tile-fill-hover: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%); --glass-filter: blur(32px) saturate(160%); --glass-edge: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(0,0,0,0.02) 70%, rgba(0,0,0,0.06) 100%); --glass-edge-hover: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(0,0,0,0.04) 70%, rgba(0,0,0,0.08) 100%); --shadow-pane: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(27, 24, 22, 0.03); --shadow-card: inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 4px 10px -2px rgba(27, 24, 22, 0.08), 0 24px 50px -12px rgba(27, 24, 22, 0.18); --shadow-card-hover: inset 0 2px 1.5px rgba(255, 255, 255, 1), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 6px 12px -2px rgba(27, 24, 22, 0.08), 0 20px 40px -12px rgba(27, 24, 22, 0.14); --shadow-elevated: inset 0 1px 0.5px rgba(255, 255, 255, 1), 0 4px 12px rgba(27, 24, 22, 0.08), 0 30px 70px -20px rgba(27, 24, 22, 0.18); --t-1: #111111; --t-2: #1e1b19; --t-3: #383430; --t-4: #5d5852; --accent: #b34b22; --accent-dim: rgba(179, 75, 34, 0.08); --accent-glow: rgba(179, 75, 34, 0.18); --accent-glow-lg: rgba(179, 75, 34, 0.3); --green: #1b874b; --green-dim: rgba(27, 135, 75, 0.08); --green-glow: rgba(27, 135, 75, 0.18); --yellow: #b38600; --yellow-dim:rgba(179, 134, 0, 0.08); --yellow-glow: rgba(179, 134, 0, 0.18); --red: #c83636; --red-dim: rgba(200, 54, 54, 0.08); --red-glow: rgba(200, 54, 54, 0.18); --blue: #1a5cbf; --blue-dim: rgba(26, 92, 191, 0.08); --blue-glow: rgba(26, 92, 191, 0.18); --purple: #6934c9; --purple-dim:rgba(105, 52, 201, 0.08); --purple-glow: rgba(105, 52, 201, 0.18); --pink: #be185d; --pink-glow: rgba(190, 24, 93, 0.18); /* Gradients */ --gradient-accent: linear-gradient(90deg, #b34b22 0%, #9c3f1a 100%); --gradient-success: linear-gradient(90deg, #1b874b 0%, #156b3b 100%); --gradient-warning: linear-gradient(90deg, #b38600 0%, #8c6900 100%); --gradient-danger: linear-gradient(90deg, #c83636 0%, #9e2b2b 100%); --gradient-info: linear-gradient(90deg, #1a5cbf 0%, #154a99 100%); --gradient-purple: linear-gradient(90deg, #6934c9 0%, #52299d 100%); --chart-grid: rgba(27, 24, 22, 0.06); --chart-text: rgba(27, 24, 22, 0.5); --clr-bg-deep: var(--bg-0); --clr-bg-base: var(--bg-1); --clr-bg-raised: var(--bg-2); --clr-bg-elevated: var(--bg-3); --glass-bg: var(--glass); --glass-bg-hover: var(--glass-hover); --glass-border: var(--border); --glass-border-hover: var(--border-hover); --glass-shadow: 0 2px 12px rgba(27, 24, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); --clr-text-primary: var(--t-1); --clr-text-secondary: var(--t-2); --clr-text-tertiary: var(--t-3); --clr-text-muted: var(--t-3); --clr-accent: var(--accent); --clr-accent-dim: var(--accent-dim); --clr-accent-glow: var(--accent-glow); --clr-success: var(--green); --clr-success-dim: var(--green-dim); --clr-warning: var(--yellow); --clr-warning-dim: var(--yellow-dim); --clr-danger: var(--red); --clr-danger-dim: var(--red-dim); --clr-info: var(--blue); --clr-info-dim: var(--blue-dim); --watermark-opacity: 0.08; --login-card-bg: #fdfcf9; --login-card-border: rgba(27, 24, 22, 0.08); --scrollbar-thumb: rgba(27, 24, 22, 0.12); --scrollbar-track: transparent; }