cesnimda
dde23c980c
CI / backend (push) Successful in 1m11s
CI / frontend (push) Successful in 28s
Deploy Staging / deploy (push) Successful in 1m9s
CI / backend (pull_request) Successful in 1m4s
CI / frontend (pull_request) Successful in 23s
Security / secrets (push) Successful in 5s
Security / dependencies (push) Successful in 1m6s
108 lines
2.9 KiB
CSS
108 lines
2.9 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;
|
|
/* Inter (variable, self-hosted via @fontsource-variable/inter); system fallback. */
|
|
font-family: 'Inter Variable', '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;
|
|
}
|
|
}
|