/** * variables.css * ---------------------------------------------------------------------------- * Design tokens for CEO AI OS. * * WHY THIS FILE EXISTS * Every color, font, spacing and timing value used anywhere in the app is * defined ONCE here as a CSS custom property. No other file should ever * hard-code a hex value, a font stack, or a pixel gap. This is what lets us * ship a Light and Dark theme (and any future theme) by changing values in * one place instead of hunting through every component. * * THEME SWITCHING * The theme engine (js/theme.js) sets `data-theme="light"` or * `data-theme="dark"` on . Each block below re-defines the same * variable names for that theme, so the rest of the CSS never needs to know * which theme is active — it just reads var(--color-bg), var(--color-ink), etc. * * TYPE STACK NOTE * The brief calls for a frontend that stays "simple, fast and lightweight." * We honor that literally: no web fonts are loaded over the network (no * render-blocking font requests, no external dependency to go down). Instead * we build a deliberate type system out of carefully ordered system font * stacks — a heavier "display" stack for headings and a neutral "body" stack * for text — so the product still has a distinct typographic personality * without costing a single extra byte on the wire. */ :root { /* ---- Light theme (default) ------------------------------------------- */ --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-alt: #ecedf2; --color-border: #dde1e7; --color-border-strong: #c3c9d3; --color-ink: #12141c; --color-ink-muted: #5b6172; --color-ink-faint: #8990a1; --color-primary: #2451e0; --color-primary-strong: #1638ad; --color-primary-ink: #ffffff; --color-accent: #ff8a34; --color-accent-ink: #1a1200; --color-success: #1e9e6b; --color-warning: #b9790a; --color-danger: #d63b3b; --color-focus-ring: #2451e0; --color-overlay: rgb(18 20 28 / 55%); --color-scrim: rgb(18 20 28 / 6%); --shadow-sm: 0 1px 2px rgb(18 20 28 / 6%); --shadow-md: 0 4px 12px rgb(18 20 28 / 10%); --shadow-lg: 0 16px 40px rgb(18 20 28 / 16%); } :root[data-theme='dark'] { --color-bg: #0e1116; --color-surface: #171b22; --color-surface-alt: #1f242c; --color-border: #2a3038; --color-border-strong: #3a4149; --color-ink: #edeff3; --color-ink-muted: #9aa1b0; --color-ink-faint: #6b7280; --color-primary: #5b85ff; --color-primary-strong: #839bff; --color-primary-ink: #0b1020; --color-accent: #ffa35c; --color-accent-ink: #1a1200; --color-success: #35c98d; --color-warning: #e0a83a; --color-danger: #ef6262; --color-focus-ring: #5b85ff; --color-overlay: rgb(0 0 0 / 65%); --color-scrim: rgb(255 255 255 / 6%); --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 4px 14px rgb(0 0 0 / 40%); --shadow-lg: 0 20px 48px rgb(0 0 0 / 55%); } :root { /* ---- Typography -------------------------------------------------------- */ --font-display: -apple-system, 'Segoe UI Semibold', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2rem; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ---- Spacing scale (4px base) ------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; /* ---- Radius & borders --------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --border-width: 1px; /* ---- Layout dimensions -------------------------------------------------- */ --header-height: 56px; --systembar-height: 28px; --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --footer-height: 40px; --content-max-width: 1400px; /* ---- Motion -------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Z-index scale --------------------------------------------------------- */ --z-header: 100; --z-sidebar: 90; --z-dropdown: 200; --z-dialog: 300; --z-toast: 400; } /* Respect users who have asked the OS to reduce motion. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }