@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 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); } }