/* CloviTek UI Kit — Design Tokens v1.0 */ /* Light/dark via data-theme attribute on */ /* ── Fleet typography — Geist (Vercel's AI/dev font, used by Cursor/v0) ─────── */ @font-face { font-family: 'Geist'; src: url('https://clovitek.com/fonts/Geist-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Geist'; src: url('https://clovitek.com/fonts/Geist-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } :root { --ck-font: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --ck-font-weight-logo: 700; --ck-font-weight-heading: 700; --ck-font-weight-ui: 600; } :root,[data-theme="light"] { --ck-bg: #f8fafc; --ck-surface: #ffffff; --ck-card: #ffffff; --ck-sidebar-bg: #f1f5f9; --ck-topbar-bg: #ffffff; --ck-border: rgba(0,0,0,0.08); --ck-border-sm: rgba(0,0,0,0.06); --ck-ink: #0f172a; --ck-soft-slate: #475569; --ck-muted: #94a3b8; --ck-hover: rgba(0,0,0,0.04); --ck-active: rgba(0,0,0,0.06); --ck-shadow: 0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.05); --ck-shadow-lg: 0 8px 24px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06); --ck-danger: #ef4444; --ck-success: #22c55e; --ck-warn: #f59e0b; --ck-accent: #6366f1; --ck-accent-hover:#4f46e5; --ck-accent-soft: rgba(99,102,241,0.1); --ck-radius: 10px; --ck-radius-sm: 6px; --ck-radius-lg: 16px; --ck-sp-1: 4px; --ck-sp-2: 8px; --ck-sp-3: 12px; --ck-sp-4: 16px; --ck-sp-6: 24px; --ck-sidebar-w: 220px; --ck-topbar-h: 56px; color-scheme: light; } [data-theme="dark"] { --ck-bg: #09101e; --ck-surface: #111827; --ck-card: #141f30; --ck-sidebar-bg: #0d1828; --ck-topbar-bg: #111827; --ck-border: rgba(255,255,255,0.08); --ck-border-sm: rgba(255,255,255,0.05); --ck-ink: #f1f5f9; --ck-soft-slate: #94a3b8; --ck-muted: #64748b; --ck-hover: rgba(255,255,255,0.05); --ck-active: rgba(255,255,255,0.08); --ck-shadow: 0 1px 3px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2); --ck-shadow-lg: 0 8px 32px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.3); --ck-danger: #f87171; --ck-success: #34d399; --ck-warn: #fbbf24; --ck-accent: #818cf8; --ck-accent-hover:#6366f1; --ck-accent-soft: rgba(129,140,248,0.12); color-scheme: dark; } /* System preference fallback when no data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ck-bg: #09101e; --ck-surface: #111827; --ck-card: #141f30; --ck-sidebar-bg: #0d1828; --ck-topbar-bg: #111827; --ck-border: rgba(255,255,255,0.08); --ck-border-sm: rgba(255,255,255,0.05); --ck-ink: #f1f5f9; --ck-soft-slate: #94a3b8; --ck-muted: #64748b; --ck-hover: rgba(255,255,255,0.05); --ck-active: rgba(255,255,255,0.08); --ck-shadow: 0 1px 3px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2); --ck-shadow-lg: 0 8px 32px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.3); --ck-danger: #f87171; --ck-success: #34d399; --ck-warn: #fbbf24; --ck-accent: #818cf8; --ck-accent-hover:#6366f1; --ck-accent-soft: rgba(129,140,248,0.12); color-scheme: dark; } }