/* ===================================================================== variables.css - design tokens Light is the default; [data-theme="dark"] on flips the palette. ===================================================================== */ :root { /* brand - overridden inline from the settings table */ --primary: #4f46e5; --primary-hover: #4338ca; --primary-soft: rgba(79, 70, 229, 0.10); --primary-ring: rgba(79, 70, 229, 0.28); --secondary: #0ea5e9; /* surfaces */ --bg: #f5f6fa; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #e9ecf3; --surface-hover: #eef1f7; --overlay: rgba(15, 20, 32, 0.55); /* text */ --text-primary: #131722; --text-secondary: #5b6478; --text-muted: #8b93a7; --text-inverse: #ffffff; /* lines */ --border: #e2e6ef; --border-strong: #cfd5e3; /* status */ --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.12); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.12); --info: #0284c7; --info-soft: rgba(2, 132, 199, 0.12); /* shape */ --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; /* elevation */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow: 0 4px 16px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); --shadow-xl: 0 24px 56px rgba(16, 24, 40, 0.18); /* typography */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem; --fs-md: 0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* layout metrics */ --sidebar-w: 264px; --sidebar-w-collapsed: 76px; --header-h: 62px; --bottomnav-h: 62px; --content-max: 1380px; /* safe areas for notched phones / Android gesture bars */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* z-index ladder */ --z-sticky: 100; --z-header: 200; --z-bottomnav: 210; --z-drawer: 300; --z-modal: 400; --z-toast: 500; color-scheme: light; } [data-theme="dark"] { --bg: #0b0f19; --bg-elevated: #131926; --surface: #131926; --surface-2: #1a2131; --surface-3: #222b3d; --surface-hover: #1f2739; --overlay: rgba(3, 6, 12, 0.7); --text-primary: #e8ebf2; --text-secondary: #9aa4bb; --text-muted: #6d7893; --text-inverse: #0b0f19; --border: #232c3d; --border-strong: #33405a; --primary-soft: rgba(99, 102, 241, 0.16); --primary-ring: rgba(99, 102, 241, 0.35); --success-soft: rgba(34, 197, 94, 0.16); --warning-soft: rgba(245, 158, 11, 0.16); --danger-soft: rgba(248, 113, 113, 0.16); --info-soft: rgba(56, 189, 248, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow: 0 4px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65); color-scheme: dark; }