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