@tailwind base;
@tailwind components;
@tailwind utilities;

/*
  Fyro Finance — design tokens (fase 0).
  Tutti i colori sono triple HSL, lette come hsl(var(--token)).
  I nomi già usati dall'app (--success, --info, --accent, --gradient-*, --shadow-*, --sidebar-*)
  restano definiti, così nessuna pagina esistente si rompe.
*/

@layer base {
  :root {
    --background: 222 20% 97%;
    --foreground: 224 24% 12%;

    --card: 0 0% 100%;
    --card-foreground: 224 24% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 24% 12%;

    --primary: 249 66% 54%;
    --primary-foreground: 0 0% 100%;
    --primary-subtle: 249 60% 96%;

    --secondary: 222 20% 95%;
    --secondary-foreground: 224 24% 12%;

    --muted: 222 20% 96%;
    --muted-foreground: 222 10% 45%;

    /* shadcn usa accent per hover/selezione nei menu: tono neutro, non colore di brand */
    --accent: 222 20% 95%;
    --accent-foreground: 224 24% 12%;

    --destructive: 354 63% 47%;
    --destructive-foreground: 0 0% 100%;

    --border: 222 16% 90%;
    --input: 222 16% 88%;
    --ring: 249 66% 54%;

    --radius: 0.625rem;

    /* semantici */
    --positive: 158 58% 33%;
    --negative: 354 63% 47%;
    --warning: 33 88% 42%;
    --neutral: 222 10% 45%;
    --success: var(--positive);
    --info: var(--primary);

    /* sezioni P&L: tinta di fondo · barra laterale · testo */
    --pl-income: 168 44% 96%;       --pl-income-bar: 168 52% 38%;   --pl-income-ink: 168 60% 22%;
    --pl-cost-1: 28 62% 96%;        --pl-cost-1-bar: 28 70% 45%;    --pl-cost-1-ink: 28 70% 26%;
    --pl-cost-2: 350 50% 97%;       --pl-cost-2-bar: 350 55% 48%;   --pl-cost-2-ink: 350 55% 30%;
    --pl-cost-3: 292 34% 97%;       --pl-cost-3-bar: 292 40% 50%;   --pl-cost-3-ink: 292 40% 30%;
    --pl-income-2: 196 46% 96%;     --pl-income-2-bar: 196 60% 38%; --pl-income-2-ink: 196 60% 22%;
    --pl-cost-4: 14 50% 97%;        --pl-cost-4-bar: 14 58% 46%;    --pl-cost-4-ink: 14 58% 28%;
    --pl-subtotal: 222 20% 95%;     --pl-subtotal-bar: 224 24% 20%;
    --pl-key: 249 60% 96%;          --pl-key-ink: 249 60% 34%;
    --pl-total: 249 66% 54%;        --pl-total-ink: 0 0% 100%;

    /* centri di costo: 10 slot fissi + "altro" */
    --cc-1: 249 60% 56%;
    --cc-2: 196 58% 44%;
    --cc-3: 168 52% 38%;
    --cc-4: 128 42% 38%;
    --cc-5: 84 40% 36%;
    --cc-6: 40 64% 42%;
    --cc-7: 20 62% 46%;
    --cc-8: 354 56% 50%;
    --cc-9: 324 44% 48%;
    --cc-10: 292 38% 52%;
    --cc-rest: 222 10% 62%;

    /* compatibilità: niente sfumature, colore pieno */
    --gradient-primary: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
    --gradient-card: linear-gradient(hsl(var(--card)), hsl(var(--card)));

    --shadow-sm: 0 1px 2px hsl(224 24% 12% / 0.06);
    --shadow-md: 0 4px 12px hsl(224 24% 12% / 0.08);
    --shadow-lg: 0 16px 40px hsl(224 24% 12% / 0.14);
    --shadow-xl: 0 24px 60px hsl(224 24% 12% / 0.18);

    --sidebar-background: 222 20% 98%;
    --sidebar-foreground: 222 12% 34%;
    --sidebar-primary: 249 66% 54%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 100%;
    --sidebar-accent-foreground: 224 24% 12%;
    --sidebar-border: 222 16% 91%;
    --sidebar-ring: 249 66% 54%;
  }

  .dark {
    --background: 226 24% 7%;
    --foreground: 220 20% 96%;

    --card: 226 20% 10%;
    --card-foreground: 220 20% 96%;

    --popover: 226 20% 11%;
    --popover-foreground: 220 20% 96%;

    --primary: 250 80% 68%;
    --primary-foreground: 250 60% 10%;
    --primary-subtle: 250 40% 18%;

    --secondary: 226 16% 15%;
    --secondary-foreground: 220 20% 96%;

    --muted: 226 16% 15%;
    --muted-foreground: 222 12% 62%;

    --accent: 226 16% 17%;
    --accent-foreground: 220 20% 96%;

    --destructive: 354 78% 66%;
    --destructive-foreground: 354 60% 10%;

    --border: 226 14% 19%;
    --input: 226 14% 23%;
    --ring: 250 80% 68%;

    --positive: 156 52% 52%;
    --negative: 354 78% 66%;
    --warning: 36 88% 60%;
    --neutral: 222 12% 62%;

    --pl-income: 168 30% 14%;       --pl-income-bar: 168 45% 50%;   --pl-income-ink: 168 40% 80%;
    --pl-cost-1: 28 34% 14%;        --pl-cost-1-bar: 28 70% 58%;    --pl-cost-1-ink: 28 48% 80%;
    --pl-cost-2: 350 30% 15%;       --pl-cost-2-bar: 350 62% 62%;   --pl-cost-2-ink: 350 40% 84%;
    --pl-cost-3: 292 24% 16%;       --pl-cost-3-bar: 292 46% 66%;   --pl-cost-3-ink: 292 34% 84%;
    --pl-income-2: 196 30% 14%;     --pl-income-2-bar: 196 55% 55%; --pl-income-2-ink: 196 40% 82%;
    --pl-cost-4: 14 30% 15%;        --pl-cost-4-bar: 14 62% 58%;    --pl-cost-4-ink: 14 40% 82%;
    --pl-subtotal: 226 16% 17%;     --pl-subtotal-bar: 220 20% 80%;
    --pl-key: 250 40% 18%;          --pl-key-ink: 250 60% 88%;
    --pl-total: 250 60% 62%;        --pl-total-ink: 250 60% 98%;

    --cc-1: 250 65% 66%;
    --cc-2: 196 55% 57%;
    --cc-3: 168 45% 52%;
    --cc-4: 128 40% 52%;
    --cc-5: 84 38% 50%;
    --cc-6: 40 62% 56%;
    --cc-7: 20 62% 60%;
    --cc-8: 354 62% 62%;
    --cc-9: 324 46% 62%;
    --cc-10: 292 46% 68%;
    --cc-rest: 222 12% 48%;

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
    --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.35);
    --shadow-lg: 0 16px 40px hsl(0 0% 0% / 0.45);
    --shadow-xl: 0 24px 60px hsl(0 0% 0% / 0.5);

    --sidebar-background: 226 22% 8%;
    --sidebar-foreground: 220 14% 78%;
    --sidebar-primary: 250 80% 68%;
    --sidebar-primary-foreground: 250 60% 10%;
    --sidebar-accent: 226 14% 20%;
    --sidebar-accent-foreground: 220 20% 96%;
    --sidebar-border: 226 14% 19%;
    --sidebar-ring: 250 80% 68%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-variant-numeric: tabular-nums;
  }
}