/* ============================================================================ Zalio design tokens — mined verbatim from production zalio-expo (apps/web/src/styles.css @ origin/main 3cc8b260, 2026-07-18). Drop into any prototype: Tailwind v4 (`@import 'tailwindcss'` + this file) or plain CSS (the :root/.dark vars work standalone). Dark mode = `.dark` class on (shadcn convention). Fonts: Icons: lucide. shadcn style: new-york, baseColor zinc. ========================================================================== */ :root { --font-heading: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-body: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Stronger easing curves than the built-in CSS keywords. --ease-out: UI entrances / collapses (starts fast, feels responsive) --ease-in-out: on-screen movement between two positions */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --zalio-brand: #ff530d; --zalio-brand-hover: #e64a0b; --zalio-brand-contrast: #ffffff; --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: var(--zalio-brand); --primary-foreground: var(--zalio-brand-contrast); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: var(--zalio-brand); --chart-1: var(--zalio-brand); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: var(--zalio-brand); --sidebar-primary-foreground: var(--zalio-brand-contrast); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: var(--zalio-brand); /* ── Shadow recipes (light) ── Layered drop shadows (Y/Blur compounding) give surfaces a natural "near-light, soft penumbra" feel instead of the single hard offset. • soft — 6-step even shadow: cards, popovers, dropdowns. • crisp — 6-step with negative spread: floating menus, modals. */ --shadow-soft: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 1px 0 rgb(0 0 0 / 0.05), 0 2px 2px 0 rgb(0 0 0 / 0.05), 0 4px 4px 0 rgb(0 0 0 / 0.05), 0 8px 8px 0 rgb(0 0 0 / 0.05), 0 16px 16px 0 rgb(0 0 0 / 0.05); --shadow-crisp: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 1px -0.5px rgb(0 0 0 / 0.06), 0 3px 3px -1.5px rgb(0 0 0 / 0.06), 0 6px 6px -3px rgb(0 0 0 / 0.06), 0 12px 12px -6px rgb(0 0 0 / 0.06), 0 24px 24px -12px rgb(0 0 0 / 0.06); /* ── 70/60 rule — saturated color suppression in dark mode ── Light mode: no suppression (alpha = 1). Dark mode: warm hues drop to 70%, cool hues to 60% so saturated paint doesn't punch against the dark surface. Apply via .fade-warm / .fade-cool. */ --alpha-warm: 1; --alpha-cool: 1; /* ── Sentiment scale ── Five sentiments (info / pending / warning / error / success), one token per sentiment — used as foreground, dot fill, and (with /10 opacity) tinted background. Keep AA on the surface it lands on. */ --sentiment-info: oklch(0.45 0.18 240); --sentiment-pending: oklch(0.55 0.02 258); --sentiment-warning: oklch(0.55 0.16 70); --sentiment-error: oklch(0.5 0.22 28); --sentiment-success: oklch(0.5 0.15 152); } .dark { --zalio-brand: #ff6a2a; --zalio-brand-hover: #ff8550; --zalio-brand-contrast: #1b0a02; /* Messenger-style dark: content area is a comfortable dark blue-gray (~#21242A); the sidebar sits deeper (~#101923) — avoids pure black while letting the nav rail recede against the main content surface. */ --background: oklch(0.22 0.008 258); --foreground: oklch(0.985 0 0); --card: oklch(0.25 0.008 258); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.25 0.008 258); --popover-foreground: oklch(0.985 0 0); --primary: var(--zalio-brand); --primary-foreground: var(--zalio-brand-contrast); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: var(--zalio-brand); --chart-1: var(--zalio-brand); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.627 0.265 303.9); --chart-4: oklch(0.769 0.188 70.08); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.16 0.02 256); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: var(--zalio-brand); --sidebar-primary-foreground: var(--zalio-brand-contrast); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: var(--zalio-brand); /* ── Dark-mode shadow recipes ── Drop-shadow alone disappears on dark; layer a faint white inner highlight (top edge + 1px outline at 2-3%) plus a stronger black drop. The eye reads "raised" from bright-top-edge vs soft-drop contrast. */ --shadow-soft: inset 0 1px 0 0 rgb(255 255 255 / 0.02), inset 0 0 0 1px rgb(255 255 255 / 0.02), 0 0 0 1px rgb(0 0 0 / 0.25); --shadow-crisp: inset 0 1px 0 0 rgb(255 255 255 / 0.03), inset 0 0 0 1px rgb(255 255 255 / 0.03), 0 0 0 1px rgb(0 0 0 / 0.1), 0 2px 2px 0 rgb(0 0 0 / 0.1), 0 4px 4px 0 rgb(0 0 0 / 0.1), 0 8px 8px 0 rgb(0 0 0 / 0.1); --alpha-warm: 0.7; --alpha-cool: 0.6; /* Sentiment (dark): lighter, less-saturated so contrast stays AA. */ --sentiment-info: oklch(0.78 0.1 240); --sentiment-pending: oklch(0.7 0.02 258); --sentiment-warning: oklch(0.8 0.13 70); --sentiment-error: oklch(0.78 0.14 28); --sentiment-success: oklch(0.78 0.12 152); }