134 lines
3.9 KiB
CSS
134 lines
3.9 KiB
CSS
/* ============================================================
|
|
Bill Tracker — Material Design theme via shadcn/studio
|
|
:root is the default Material Design light theme.
|
|
============================================================ */
|
|
|
|
/* ── Tailwind base ───────────────────────────────────────── */
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0.98 0.01 335.69;
|
|
--foreground: 0.22 0 0;
|
|
--card: 0.96 0.01 335.69;
|
|
--card-foreground: 0.14 0 0;
|
|
--popover: 0.95 0.01 316.67;
|
|
--popover-foreground: 0.40 0.04 309.35;
|
|
--primary: 0.51 0.21 286.50;
|
|
--primary-foreground: 1.00 0 0;
|
|
--secondary: 0.49 0.04 300.23;
|
|
--secondary-foreground: 1.00 0 0;
|
|
--muted: 0.96 0.01 335.69;
|
|
--muted-foreground: 0.43 0.02 309.68;
|
|
--accent: 0.92 0.04 303.47;
|
|
--accent-foreground: 0.14 0 0;
|
|
--destructive: 0.57 0.23 29.21;
|
|
--destructive-foreground: 1.00 0 0;
|
|
--border: 0.83 0.02 308.26;
|
|
--input: 0.83 0.02 308.26;
|
|
--ring: 0.50 0.13 293.77;
|
|
--chart-1: 0.61 0.21 279.42;
|
|
--chart-2: 0.72 0.15 157.67;
|
|
--chart-3: 0.66 0.17 324.24;
|
|
--chart-4: 0.81 0.15 127.91;
|
|
--chart-5: 0.68 0.17 258.25;
|
|
--sidebar: 0.99 0 0;
|
|
--sidebar-foreground: 0.15 0 0;
|
|
--sidebar-primary: 0.56 0.11 228.27;
|
|
--sidebar-primary-foreground: 0.98 0 0;
|
|
--sidebar-accent: 0.95 0 0;
|
|
--sidebar-accent-foreground: 0.25 0 0;
|
|
--sidebar-border: 0.90 0 0;
|
|
--sidebar-ring: 0.56 0.11 228.27;
|
|
--font-sans: Roboto, Inter, ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: Merriweather, Georgia, serif;
|
|
--font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
|
|
--radius: 1rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 0.15 0.01 317.69;
|
|
--foreground: 0.95 0.01 321.50;
|
|
--card: 0.22 0.02 322.13;
|
|
--card-foreground: 0.95 0.01 321.50;
|
|
--popover: 0.22 0.02 322.13;
|
|
--popover-foreground: 0.95 0.01 321.50;
|
|
--primary: 0.60 0.22 279.81;
|
|
--primary-foreground: 0.98 0.01 321.51;
|
|
--secondary: 0.45 0.03 294.79;
|
|
--secondary-foreground: 0.95 0.01 321.50;
|
|
--muted: 0.22 0.01 319.50;
|
|
--muted-foreground: 0.70 0.01 320.70;
|
|
--accent: 0.35 0.06 299.57;
|
|
--accent-foreground: 0.95 0.01 321.50;
|
|
--destructive: 0.70 0.19 22.23;
|
|
--destructive-foreground: 0.98 0.01 321.51;
|
|
--border: 0.40 0.04 309.35;
|
|
--input: 0.40 0.04 309.35;
|
|
--ring: 0.50 0.15 294.97;
|
|
--chart-1: 0.50 0.25 274.99;
|
|
--chart-2: 0.60 0.15 150.16;
|
|
--chart-3: 0.65 0.20 309.96;
|
|
--chart-4: 0.60 0.17 132.98;
|
|
--chart-5: 0.60 0.20 255.25;
|
|
--sidebar: 0.20 0.01 317.74;
|
|
--sidebar-foreground: 0.95 0.01 321.50;
|
|
--sidebar-primary: 0.59 0.11 225.82;
|
|
--sidebar-primary-foreground: 0.95 0.01 321.50;
|
|
--sidebar-accent: 0.30 0.01 319.52;
|
|
--sidebar-accent-foreground: 0.95 0.01 321.50;
|
|
--sidebar-border: 0.35 0.01 319.53;
|
|
--sidebar-ring: 0.59 0.11 225.82;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background font-sans text-foreground antialiased;
|
|
letter-spacing: 0;
|
|
}
|
|
}
|
|
|
|
/* ── Utilities ───────────────────────────────────────────── */
|
|
|
|
@layer utilities {
|
|
|
|
/* Generic surface */
|
|
.surface {
|
|
@apply rounded-2xl border border-border/70 bg-card/95 shadow-sm backdrop-blur-sm;
|
|
}
|
|
|
|
/* Elevated surface */
|
|
.surface-elevated {
|
|
@apply surface;
|
|
box-shadow:
|
|
0 1px 2px rgb(0 0 0 / 0.05),
|
|
0 8px 32px rgb(0 0 0 / 0.08);
|
|
}
|
|
|
|
.dark .surface-elevated {
|
|
box-shadow:
|
|
0 0 0 1px oklch(var(--border) / 0.7),
|
|
0 8px 32px rgb(0 0 0 / 0.7);
|
|
}
|
|
|
|
/* Stat cards */
|
|
.stat-card {
|
|
@apply surface-elevated p-6;
|
|
}
|
|
|
|
/* Table */
|
|
.table-surface {
|
|
@apply surface overflow-hidden shadow-sm;
|
|
}
|
|
}
|