simone
26d752892a
- Page background now #F8F9FA (was white); tokens matched to reference: foreground slate-900, muted slate-50/slate-500, border slate-200, card pure white, tertiary slate-400, border-light slate-100 - Sidebar colors matched to mock: emerald-200/70 inactive, white/8 active with emerald-400 active icon, emerald-50 logo, red-300 logout, right border - Content wrapped in max-w-[1400px] centered container (px-8 lg:px-10) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
219 lines
5.7 KiB
CSS
219 lines
5.7 KiB
CSS
@import "tailwindcss";
|
|
@plugin "tailwindcss-animate";
|
|
@source not "../../.01_projects/**";
|
|
@source not "../../.claude/**";
|
|
@source not "../../scripts/**";
|
|
@source not "../../.planning/**";
|
|
|
|
/* Class-based dark mode (Tailwind v4). The FOUC guard in layout.tsx toggles
|
|
`.dark` on <html> before paint; the useTheme hook keeps it in sync. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* =========================================================
|
|
Design tokens — iamcavalli brand palette
|
|
Raw values live in :root (light) / .dark (dark) so the whole
|
|
app themes off a single class toggle; @theme inline below maps
|
|
them to Tailwind color utilities (bg-background, text-primary…).
|
|
========================================================= */
|
|
:root {
|
|
/* Base — sfondo generale app #F8F9FA (color-bg-light), testo slate-900 */
|
|
--background: #F8F9FA;
|
|
--foreground: #0F172A;
|
|
|
|
/* Brand primary — verde scuro iamcavalli */
|
|
--primary: #1A463C;
|
|
--primary-foreground: #ffffff;
|
|
|
|
/* Brand accent — giallo lime */
|
|
--accent: #DEF168;
|
|
--accent-foreground: #1A463C;
|
|
|
|
/* Secondary — grigio neutro (slate-100) */
|
|
--secondary: #f1f5f9;
|
|
--secondary-foreground: #0F172A;
|
|
|
|
/* Muted — sfondi secondari (slate-50) / testo slate-500 */
|
|
--muted: #f8fafc;
|
|
--muted-foreground: #64748B;
|
|
|
|
/* Destructive */
|
|
--destructive: #ef4444;
|
|
--destructive-foreground: #ffffff;
|
|
|
|
/* Card — bianco puro (color-bg-card) */
|
|
--card: #FFFFFF;
|
|
--card-foreground: #0F172A;
|
|
|
|
/* Popover */
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #0F172A;
|
|
|
|
/* Border (slate-200 = border-card) / Input / Ring */
|
|
--border: #e2e8f0;
|
|
--input: #e2e8f0;
|
|
--ring: #1A463C;
|
|
|
|
/* Semantic — stato task/pagamenti */
|
|
--success: #16a34a;
|
|
--warning: #ca8a04;
|
|
--info: #2563eb;
|
|
|
|
/* Legacy — text-light slate-400, border-soft slate-100 */
|
|
--tertiary: #94A3B8;
|
|
--bg-subtle: #f8fafc;
|
|
--border-light: #f1f5f9;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
/* Base — verde-nero, coerente col brand */
|
|
--background: #0e1512;
|
|
--foreground: #f2f4f3;
|
|
|
|
/* Brand primary — verde schiarito per contrasto su fondo scuro */
|
|
--primary: #3FA88C;
|
|
--primary-foreground: #06110d;
|
|
|
|
/* Brand accent — lime invariato, testo verde scuro */
|
|
--accent: #DEF168;
|
|
--accent-foreground: #14231d;
|
|
|
|
--secondary: #1b2420;
|
|
--secondary-foreground: #f2f4f3;
|
|
|
|
--muted: #171f1b;
|
|
--muted-foreground: #9aa39e;
|
|
|
|
--destructive: #f87171;
|
|
--destructive-foreground: #1a0a0a;
|
|
|
|
--card: #131a16;
|
|
--card-foreground: #f2f4f3;
|
|
|
|
--popover: #131a16;
|
|
--popover-foreground: #f2f4f3;
|
|
|
|
--border: #26302b;
|
|
--input: #26302b;
|
|
--ring: #3FA88C;
|
|
|
|
--success: #22c55e;
|
|
--warning: #eab308;
|
|
--info: #3b82f6;
|
|
|
|
--tertiary: #8a938d;
|
|
--bg-subtle: #171f1b;
|
|
--border-light: #26302b;
|
|
}
|
|
|
|
@theme inline {
|
|
/* Font */
|
|
--font-sans: var(--font-plus-jakarta-sans), system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
/* Colors — mapped from the raw tokens above */
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--color-info: var(--info);
|
|
|
|
--color-tertiary: var(--tertiary);
|
|
--color-bg-subtle: var(--bg-subtle);
|
|
--color-border-light: var(--border-light);
|
|
|
|
/* Radius — wire the base --radius into Tailwind's radius scale so
|
|
rounded-lg / rounded-xl resolve off a single token. */
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 0.25rem);
|
|
|
|
/* Luxury shadows — very low-opacity, wide-spread card elevation
|
|
("Quiet Luxury" design system). */
|
|
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.01);
|
|
--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
/* =========================================================
|
|
Base styles
|
|
========================================================= */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* =========================================================
|
|
Scrollbar utilities (ported from OMC design system)
|
|
========================================================= */
|
|
@layer utilities {
|
|
/* Hide the native scrollbar without breaking scroll. */
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Very thin, muted scrollbar — discoverable but low-noise. */
|
|
.thin-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
.thin-scrollbar::-webkit-scrollbar {
|
|
height: 3px;
|
|
width: 3px;
|
|
}
|
|
.thin-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.thin-scrollbar::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 9999px;
|
|
}
|
|
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted-foreground);
|
|
}
|
|
}
|