`src/app/globals.css`

73 lines
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* Design tokens. Dark-first; .dark overrides flow through via @theme inline. */
:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(222 47% 11%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222 47% 11%);
  --muted: hsl(210 40% 96%);
  --muted-foreground: hsl(215 16% 47%);
  --border: hsl(214 32% 91%);
  --primary: hsl(221 83% 53%);
  --primary-foreground: hsl(0 0% 100%);
  --accent: hsl(210 40% 94%);
  --positive: hsl(142 71% 45%);
  --negative: hsl(0 72% 51%);
  --warning: hsl(38 92% 50%);
}

.dark {
  --background: hsl(222 24% 8%);
  --foreground: hsl(210 40% 96%);
  --card: hsl(222 22% 11%);
  --card-foreground: hsl(210 40% 96%);
  --muted: hsl(217 24% 16%);
  --muted-foreground: hsl(215 20% 65%);
  --border: hsl(217 24% 20%);
  --primary: hsl(217 91% 60%);
  --primary-foreground: hsl(222 47% 11%);
  --accent: hsl(217 24% 18%);
  --positive: hsl(142 69% 58%);
  --negative: hsl(0 84% 65%);
  --warning: hsl(38 92% 60%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-accent: var(--accent);
  --color-positive: var(--positive);
  --color-negative: var(--negative);
  --color-warning: var(--warning);
}

* {
  border-color: var(--border);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-feature-settings: "tnum" 1;
}

/* Thin, dark scrollbars for the wide table. */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}