/* * ClientsHub shared design tokens. * One source of truth for brand, typography, spacing and theming used by the * marketing site (/), the dashboard (/app) and the operator console (/admin). * * Theme resolution: * - default is light; * - `:root[data-theme="dark"]` forces dark; * - `:root[data-theme="light"]` forces light; * - otherwise the OS preference (`prefers-color-scheme`) decides. * Surfaces stamp `data-theme` on to let users override the OS setting. */ :root { /* ---- Brand (identical on every surface) ---- */ --ch-brand: #ff7a1a; --ch-brand-strong: #ff8a00; --ch-brand-contrast: #101010; --ch-brand-gradient: linear-gradient(90deg, #ff8a00 0%, #ff3d6e 100%); --ch-cyan: #22c3dc; --ch-green: #39d98a; --ch-gold: #d8a62c; --ch-danger: #e5484d; --ch-success: #14823b; --ch-warning: #b77900; /* ---- Typography ---- */ --ch-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ch-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ---- Radius / shadow / spacing scale ---- */ --ch-radius-sm: 8px; --ch-radius: 12px; --ch-radius-lg: 16px; --ch-space-1: 4px; --ch-space-2: 8px; --ch-space-3: 12px; --ch-space-4: 16px; --ch-space-5: 24px; --ch-space-6: 32px; /* ---- Semantic surfaces (light default) ---- */ --ch-bg: #ffffff; --ch-surface: #ffffff; --ch-surface-soft: #f6f7f9; --ch-elevated: #ffffff; --ch-text: #0b0b0f; --ch-muted: #5b6472; --ch-border: rgba(0, 0, 0, 0.10); --ch-border-soft: rgba(0, 0, 0, 0.06); --ch-hover: rgba(255, 138, 0, 0.06); --ch-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --ch-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.20); color-scheme: light; } /* Dark palette, shared by explicit opt-in and OS preference. */ :root[data-theme="dark"] { --ch-bg: #071016; --ch-surface: #101b23; --ch-surface-soft: #16242d; --ch-elevated: #16242d; --ch-text: #f7fafb; --ch-muted: #aebcc4; --ch-border: #29404b; --ch-border-soft: rgba(255, 255, 255, 0.08); --ch-hover: rgba(255, 138, 0, 0.12); --ch-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --ch-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch-bg: #071016; --ch-surface: #101b23; --ch-surface-soft: #16242d; --ch-elevated: #16242d; --ch-text: #f7fafb; --ch-muted: #aebcc4; --ch-border: #29404b; --ch-border-soft: rgba(255, 255, 255, 0.08); --ch-hover: rgba(255, 138, 0, 0.12); --ch-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --ch-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45); color-scheme: dark; } }