@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@300..600&display=swap"); @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); /* * Archival warmth + forensic precision. Warm paper surfaces, ink text, a * forest-green accent, and a green -> gold -> terracotta ramp for stacked * charts. No pure white background, no pure black, no cold neutrals. */ :root { font-family: "Geist", "Geist Fallback", system-ui, sans-serif; --radius: 0.375rem; --background: #f6f4ef; --outer-background: #e9e6de; --foreground: #16181d; --card: #ffffff; --card-foreground: #16181d; --popover: #ffffff; --popover-foreground: #16181d; --muted: #efece4; --muted-foreground: #5d626b; --tertiary-foreground: #8a857c; --heading: #2c5242; --border: rgba(23, 27, 32, 0.08); --input: rgba(23, 27, 32, 0.14); --interactive-secondary: rgba(23, 27, 32, 0.04); --interactive-secondary-hover: rgba(23, 27, 32, 0.08); --active-primary: #ffffff; --accent: #efece4; --accent-foreground: #16181d; --subtle: #8a857c; --primary: #1f8a5b; --primary-foreground: #ffffff; --ring: #1f8a5b; --positive: #1f8a5b; --brand: #e8553a; --chart-1: #1f8a5b; --chart-2: #4fd394; --chart-3: #2c5242; --chart-4: #d99a3c; --chart-5: #c8541f; --chart-6: #2f5fd0; --chart-7: #7aa86f; --chart-8: #b5403a; --chart-9: #3f8f6b; --chart-10: #a98b4f; --chart-grid-stroke: rgba(23, 27, 32, 0.07); --chart-hover-cursor: rgba(0, 0, 0, 0.04); color-scheme: light; } /* * Dark surface: reuses the Electron app's dark tokens (app/renderer/styles/ * plain.css) so the dashboard and the desktop shell stay visually consistent. * Chart colors are re-derived for dark-background contrast. The .dark class is * applied to by index.html before first paint and toggled in the header. */ .dark { color-scheme: dark; --background: #0e1013; --outer-background: #0e1013; --foreground: #e8eaee; --card: #16181d; --card-foreground: #e8eaee; --popover: #16181d; --popover-foreground: #e8eaee; --muted: #1a1d22; --muted-foreground: #959ca8; --tertiary-foreground: #8b93a1; --heading: #7aa86f; --border: #282c33; --input: #282c33; --interactive-secondary: rgba(255, 255, 255, 0.06); --interactive-secondary-hover: rgba(255, 255, 255, 0.1); --active-primary: #2a2f38; --accent: #1a1d22; --accent-foreground: #e8eaee; --subtle: #8b93a1; --primary: #3ecf8e; --primary-foreground: #0e1013; --ring: #3ecf8e; --positive: #3ecf8e; --brand: #f2701c; --chart-1: #3ecf8e; --chart-2: #7ce0b0; --chart-3: #2f9e6e; --chart-4: #e8b93e; --chart-5: #f2701c; --chart-6: #5b9bef; --chart-7: #8bb6a0; --chart-8: #f26d6d; --chart-9: #4fbf93; --chart-10: #d5b26a; --chart-grid-stroke: rgba(255, 255, 255, 0.08); --chart-hover-cursor: rgba(255, 255, 255, 0.06); } @theme inline { --color-background: var(--background); --color-outer-background: var(--outer-background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-tertiary-foreground: var(--tertiary-foreground); --color-heading: var(--heading); --color-border: var(--border); --color-input: var(--input); --color-interactive-secondary: var(--interactive-secondary); --color-interactive-secondary-hover: var(--interactive-secondary-hover); --color-active-primary: var(--active-primary); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-subtle: var(--subtle); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-ring: var(--ring); --color-positive: var(--positive); --color-brand: var(--brand); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-chart-6: var(--chart-6); --color-chart-7: var(--chart-7); --color-chart-8: var(--chart-8); --color-chart-9: var(--chart-9); --color-chart-10: var(--chart-10); --color-chart-grid-stroke: var(--chart-grid-stroke); --font-display: "Alga", Georgia, "Times New Roman", serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: calc(var(--radius) - 2px); --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 2px); --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; } @layer base { * { @apply border-border; } body { @apply bg-outer-background text-foreground; letter-spacing: -0.006em; font-weight: 400; margin: 0; } ::selection { background: var(--primary); color: var(--primary-foreground); } * { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--foreground) 16%, transparent) transparent; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-shimmer { background-color: var(--muted); background-image: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--foreground) 7%, transparent) 50%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer 1.6s ease-in-out infinite; }