mirror of
https://github.com/hanzoai/billing.git
synced 2026-10-30 18:46:54 +00:00
91 lines
2.1 KiB
CSS
91 lines
2.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
/* Brand — white in dark mode, dark in light mode (overridden below) */
|
|
--color-brand: #ffffff;
|
|
--color-brand-foreground: #000000;
|
|
--color-brand-hover: #d4d4d4;
|
|
--color-brand-muted: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Semantic tokens — dark mode default (matches hanzo.id) */
|
|
--color-bg: #0a0a0f;
|
|
--color-bg-card: #141419;
|
|
--color-bg-elevated: #1a1a22;
|
|
--color-bg-input: #0a0a0f;
|
|
--color-border: #333333;
|
|
--color-border-strong: #555555;
|
|
--color-text: #ffffff;
|
|
--color-text-secondary: #aaaaaa;
|
|
--color-text-muted: #888888;
|
|
--color-text-dim: #555555;
|
|
|
|
/* Status colors */
|
|
--color-success: #22c55e;
|
|
--color-warning: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--color-info: #3b82f6;
|
|
}
|
|
|
|
@theme inline {
|
|
--default-font-family: var(--font-sans);
|
|
--default-mono-font-family: var(--font-mono);
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.light {
|
|
--color-bg: hsl(0, 0%, 98%);
|
|
--color-bg-card: hsl(0, 0%, 100%);
|
|
--color-bg-elevated: hsl(0, 0%, 96%);
|
|
--color-bg-input: hsl(0, 0%, 100%);
|
|
--color-border: hsl(0, 0%, 88%);
|
|
--color-border-strong: hsl(0, 0%, 78%);
|
|
--color-text: hsl(0, 0%, 8%);
|
|
--color-text-secondary: hsl(0, 0%, 35%);
|
|
--color-text-muted: hsl(0, 0%, 45%);
|
|
--color-text-dim: hsl(0, 0%, 60%);
|
|
|
|
/* Brand inverts to dark in light mode so logo/buttons remain visible */
|
|
--color-brand: #171717;
|
|
--color-brand-foreground: #ffffff;
|
|
--color-brand-hover: #404040;
|
|
--color-brand-muted: rgba(23, 23, 23, 0.1);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
}
|
|
|
|
html.light ::selection {
|
|
background-color: rgba(23, 23, 23, 0.15);
|
|
color: white;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Smooth theme transitions */
|
|
html.transitioning,
|
|
html.transitioning *,
|
|
html.transitioning *::before,
|
|
html.transitioning *::after {
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
|
|
}
|