:root {
  /* palette base */
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);

  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.5% 0 0);

  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.5% 0 0);

  --primary: oklch(20.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);

  --secondary: oklch(97% 0 0);
  --secondary-foreground: oklch(20.5% 0 0);

  --muted: oklch(97% 0 0);
  --muted-foreground: oklch(55.6% 0 0);

  --accent: oklch(97% 0 0);
  --accent-foreground: oklch(20.5% 0 0);

  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(57.7% .245 27.325);

  --border: oklch(92.2% 0 0);
  --input: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);

  /* chart (opzionale) */
  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);

  /* radius + brand */
  --radius: .625rem;
  --brand: oklch(57% .19 27);

  /* tipografia e spazi comuni */
  --spacing: .25rem;
  --container-xl: 36rem;

  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;

  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  /* grigi utili */
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-900: oklch(21% .034 264.665);
  --color-white: #fff;

  /* font families */
  --default-font-family: var(--font-geist-sans);
  --default-mono-font-family: var(--font-geist-mono);
}

/* Dark theme override */
.dark {
  --background: oklch(16% 0 0);
  --foreground: oklch(95% 0 0);

  --card: oklch(14.5% 0 0);
  --card-foreground: oklch(98.5% 0 0);

  --popover: oklch(14.5% 0 0);
  --popover-foreground: oklch(98.5% 0 0);

  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(20.5% 0 0);

  --secondary: oklch(26.9% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);

  --muted: oklch(26.9% 0 0);
  --muted-foreground: oklch(70% 0 0);

  --accent: oklch(26.9% 0 0);
  --accent-foreground: oklch(98.5% 0 0);

  --destructive: oklch(39.6% .141 25.723);
  --destructive-foreground: oklch(63.7% .237 25.331);

  --border: oklch(26.9% 0 0);
  --input: oklch(26.9% 0 0);
  --ring: oklch(43.9% 0 0);

  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);

  --brand: oklch(62% .22 27);
}

/* Theme toggle component -----------------------------------------------------*/
.theme-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--foreground) 8%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  cursor: pointer;
}
.theme-toggle:hover{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand) 25%, transparent);
}
.theme-toggle .icon{
  width: 20px; height: 20px; display: block;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
html.dark .theme-toggle .dark-icon  { opacity: 1;  filter: none; }
html.dark .theme-toggle .light-icon { opacity: .45; filter: grayscale(1) brightness(.85); }
html:not(.dark) .theme-toggle .dark-icon  { opacity: .45; filter: grayscale(1) brightness(.85); }
html:not(.dark) .theme-toggle .light-icon { opacity: 1;  filter: none; }