BillTracker/client/index.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;
  }
}