83 lines
3.0 KiB
CSS
83 lines
3.0 KiB
CSS
/* External @imports must come first per CSS spec. */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
/* ===== Warm taupe & burnt-orange palette =====
|
|
A step darker than pure cream: the body is a soft taupe so white-ish
|
|
cards lift off the surface, giving real depth without going dark.
|
|
Borders are more defined; muted surfaces sit between bg and card so
|
|
secondary chrome (toolbars, table headers) reads as quietly recessed.
|
|
*/
|
|
@theme {
|
|
--color-background: #e8dfc9; /* warm taupe — deeper than cream */
|
|
--color-foreground: #1c1917; /* stone-900 */
|
|
|
|
--color-card: #faf6ea; /* lifted off-white cream */
|
|
--color-card-foreground: #1c1917;
|
|
|
|
--color-popover: #faf6ea;
|
|
--color-popover-foreground: #1c1917;
|
|
|
|
--color-primary: #b8410c; /* burnt orange, slightly deeper */
|
|
--color-primary-foreground: #fff7ed;
|
|
|
|
--color-secondary: #ddd2b8; /* a touch under the bg */
|
|
--color-secondary-foreground: #1c1917;
|
|
|
|
--color-muted: #ddd2b8; /* toolbars / table headers */
|
|
--color-muted-foreground: #44403c; /* stone-700 — readable on muted */
|
|
|
|
--color-accent: #f8d6a9; /* warm amber-cream */
|
|
--color-accent-foreground: #7c2d12; /* orange-900 */
|
|
|
|
--color-destructive: #a51c1c;
|
|
--color-destructive-foreground: #ffffff;
|
|
|
|
--color-border: #c8b994; /* deeper warm beige border */
|
|
--color-input: #c8b994;
|
|
--color-ring: #d97706; /* amber-600 focus ring */
|
|
|
|
--color-ok: #15803d;
|
|
--color-warn: #b45309;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
html, body, #root { height: 100%; }
|
|
/* Root rem base. Tailwind sizing (text/heights/padding/gaps) is in rem, so
|
|
this is the single global density knob — shrinks the whole UI uniformly
|
|
while Leaflet maps (px-based) stay correct. Default browser base is 16px. */
|
|
html { font-size: 13px; }
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-sans);
|
|
font-size: 0.95rem;
|
|
line-height: 1.4;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
}
|
|
|
|
/* Subtle elevation on every Card-styled surface so cards visibly sit on
|
|
top of the taupe background — paper-on-paper feel. */
|
|
.bg-card {
|
|
box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05),
|
|
0 0 0 1px rgba(28, 25, 23, 0.02);
|
|
}
|
|
|
|
/* Warm scrollbar tuned to the deeper bg */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: #b8a880;
|
|
border-radius: 5px;
|
|
border: 2px solid var(--color-background);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: #968455; }
|