/* tokens.css — uisuppli.es design tokens * * Themes: light (default) · dark * Fonts: inter (default) · geist · dm-sans · fraunces · lato * * Switch themes: data-theme="dark" on * Switch fonts: data-font="geist" on */ /* ─── ASH (default, light) ─────────────────────────────────── */ :root { /* Color */ --color-bg: #fafafa; --color-surface: #ffffff; --color-surface-raised: #f4f4f5; --color-border: #e4e4e7; --color-text: #09090b; --color-text-muted: #71717a; --color-accent: #18181b; --color-accent-hover: #3f3f46; --color-accent-fg: #ffffff; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Typography */ --font-sans: 'Inter', system-ui, sans-serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Motion */ --duration-fast: 100ms; --duration-base: 180ms; --duration-slow: 320ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ─── ASH dark ──────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #09090b; --color-surface: #18181b; --color-surface-raised: #27272a; --color-border: #3f3f46; --color-text: #fafafa; --color-text-muted: #71717a; --color-accent: #fafafa; --color-accent-hover: #ffffff; --color-accent-fg: #09090b; } /* ─── Font overrides ────────────────────────────────────────── */ [data-font="geist"] { --font-sans: 'Geist', system-ui, sans-serif; } [data-font="dm-sans"] { --font-sans: 'DM Sans', system-ui, sans-serif; } [data-font="fraunces"]{ --font-sans: 'Fraunces', Georgia, serif; } [data-font="lato"] { --font-sans: 'Lato', system-ui, sans-serif; }