cesnimda
0772de5368
Re-point the design tokens to the approved brief (docs/discovery/04): - green brand accent from #3ba31f (contrast-tuned per theme; white-on-green AA) - warm-leaning neutrals; genuine white light theme; warm-charcoal dark (not pure black) - 8px base radius; Inter-preferred font stack; static green ramp for utilities - dark-first default for new users Also re-skins the legacy styles.css palette so the current app adopts the brand. Verified: frontend builds clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
108 lines
2.8 KiB
CSS
108 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
Design tokens. The ONLY place colors are defined. Change --primary / --ring
|
|
to re-brand the whole app; a future user-facing accent picker can write these
|
|
two variables at runtime. See docs/specs/ui-overhaul.md.
|
|
*/
|
|
@layer base {
|
|
/*
|
|
Design tokens — v2 (per docs/discovery/04). Dark-first, warm-leaning neutrals,
|
|
green brand accent derived from #3ba31f. Light is a genuine white (not grey).
|
|
Green is never the SOLE state signal (pair with icon/shape) — colour-blind-safe
|
|
by construction. Values are HSL triples (space-separated) for Tailwind's
|
|
`hsl(var(--x) / <alpha-value>)` mapping.
|
|
*/
|
|
:root {
|
|
/* Light — genuine white, warm off-white surfaces */
|
|
--background: 0 0% 100%;
|
|
--foreground: 30 10% 12%;
|
|
--card: 40 33% 99%;
|
|
--muted: 40 24% 96%;
|
|
--muted-foreground: 35 8% 42%;
|
|
--border: 38 18% 89%;
|
|
--input: 38 18% 89%;
|
|
--ring: 110 62% 38%;
|
|
|
|
/* Brand accent — green (from #3ba31f), darkened for AA white-on-green */
|
|
--primary: 110 62% 33%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
/* Semantic */
|
|
--success: 145 55% 38%;
|
|
--warning: 38 92% 45%;
|
|
--danger: 4 74% 50%;
|
|
--danger-foreground: 0 0% 100%;
|
|
|
|
--radius: 0.5rem; /* lg 8px · md 6px · sm 4px */
|
|
}
|
|
|
|
.dark {
|
|
/* Dark (default) — warm charcoal layers, NOT pure black */
|
|
--background: 30 7% 10%;
|
|
--foreground: 40 22% 93%;
|
|
--card: 30 7% 13%;
|
|
--muted: 30 6% 17%;
|
|
--muted-foreground: 35 9% 64%;
|
|
--border: 30 7% 22%;
|
|
--input: 30 7% 24%;
|
|
--ring: 110 50% 46%;
|
|
|
|
/* Brand accent — luminous green for dark surfaces */
|
|
--primary: 110 52% 42%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
--success: 145 50% 48%;
|
|
--warning: 38 90% 56%;
|
|
--danger: 4 72% 58%;
|
|
--danger-foreground: 0 0% 100%;
|
|
}
|
|
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
/* Prefer Inter when available (bundled in a later slice); graceful system fallback. */
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Subtle, modern scrollbars that respect the theme. */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--border)) transparent;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
background-clip: padding-box;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
}
|