@layer sp-reset, sp-theme, sp-components, site, utilities;
@layer sp-reset {
.sp-root, .sp-root * { box-sizing: border-box; }
.sp-root { font-family: var(--sp-font-b); color: var(--sp-fg); background: var(--sp-bg); font-size: calc(1rem * var(--sp-text-scale, 1)); }
.sp-root ::-webkit-scrollbar, html::-webkit-scrollbar { width: var(--sp-scroll-width); height: var(--sp-scroll-width); }
.sp-root ::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: var(--sp-scroll-track); border: 0; border-radius: var(--sp-scroll-radius); box-shadow: none; }
.sp-root ::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: var(--sp-scroll-thumb); border: 0; border-radius: var(--sp-scroll-radius); box-shadow: none; }
.sp-root ::-webkit-scrollbar-button, html::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.sp-root ::-webkit-scrollbar-corner, html::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { html, .sp-root { scrollbar-color: var(--sp-scroll-thumb) var(--sp-scroll-track); scrollbar-width: thin; } }
.sp-root ::placeholder { opacity: .55; }
.sp-gradient-text { background-image: var(--sp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@keyframes sp-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 5%) scale(1.06); } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.sp-anim-rise { animation: sp-rise .55s var(--sp-ease, ease) both; }
.sp-anim-fade { animation: sp-fade .6s var(--sp-ease, ease) both; }
.sp-anim-pop { animation: sp-pop .4s var(--sp-ease, ease) both; }
@media (prefers-reduced-motion: reduce) { .sp-root * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
}
@layer sp-theme {
.sp-root {
  --sp-bg: radial-gradient(110% 110% at 10% 5%, rgba(15, 157, 110, 0.5), transparent 55%), radial-gradient(120% 120% at 92% 95%, rgba(245, 158, 11, 0.42), transparent 55%), linear-gradient(160deg, #eef1fb, #dde5f6);
  --sp-fg: #18181b;
  --sp-card: rgba(255,255,255,0.55);
  --sp-card-fg: #18181b;
  --sp-popover: rgba(255,255,255,0.55);
  --sp-popover-fg: #18181b;
  --sp-primary: #0f9d6e;
  --sp-primary-fg: #ffffff;
  --sp-secondary: rgba(255,255,255,0.55);
  --sp-secondary-fg: #18181b;
  --sp-muted: rgba(255,255,255,0.55);
  --sp-muted-fg: #71717a;
  --sp-accent: rgba(255,255,255,0.55);
  --sp-accent-fg: #18181b;
  --sp-destructive: #e7000b;
  --sp-destructive-fg: #ffffff;
  --sp-border: rgba(255,255,255,0.70);
  --sp-input: rgba(255,255,255,0.70);
  --sp-ring: #0f9d6e;
  --sp-brand: #0f9d6e;
  --sp-brand-accent: #f59e0b;
  --sp-sidebar: #ffffff;
  --sp-sidebar-fg: #18181b;
  --sp-sidebar-muted: #71717a;
  --sp-sidebar-border: #e4e4e7;
  --sp-sidebar-accent: #e2f3ee;
  --sp-sidebar-accent-fg: #0f9d6e;
  --sp-border-w: 1px;
  --sp-blur: blur(14px) saturate(160%);
  --sp-ring-w: 2px;
  --sp-grad: linear-gradient(95deg, #0f9d6e, #f59e0b);
  --sp-shadow-sm: 0 2px 10px rgba(40,60,140,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --sp-shadow: 0 8px 32px rgba(40,60,140,0.12), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 0 18px 8px rgba(255,255,255,0.35);
  --sp-shadow-lg: 0 20px 50px rgba(40,60,140,.18), inset 0 1px 0 rgba(255,255,255,.65);
  --sp-shadow-btn: 0 10px 30px rgba(15, 157, 110, 0.4);
  --sp-scroll-thumb: rgba(255,255,255,.55);
  --sp-scroll-track: rgba(255,255,255,.30);
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 10px;
  --sp-font-h: 'Bricolage Grotesque', sans-serif;
  --sp-font-b: 'Plus Jakarta Sans', sans-serif;
  --sp-radius: 18px;
  --sp-space: 1;
  --sp-text-scale: 1;
  --sp-dur: 0.18s;
  --sp-ease: cubic-bezier(.4, 0, .2, 1);
  --sp-anim: 1;
  --sp-decor: 1;
  --brand: var(--sp-primary);
  --brand-ink: var(--sp-primary);
  --bg: var(--sp-bg);
  --panel: var(--sp-card);
  --line: var(--sp-border);
  --ink: var(--sp-fg);
  --muted: var(--sp-muted-fg);
}
.sp-root.dark {
  --sp-bg: radial-gradient(120% 120% at 12% 8%, rgba(15, 157, 110, 0.55), transparent 55%), radial-gradient(120% 120% at 88% 92%, rgba(245, 158, 11, 0.5), transparent 55%), linear-gradient(160deg, #0a0c1a, #0c1430);
  --sp-fg: #fafafa;
  --sp-card: rgba(255,255,255,0.08);
  --sp-card-fg: #fafafa;
  --sp-popover: rgba(255,255,255,0.08);
  --sp-popover-fg: #fafafa;
  --sp-primary: #0f9d6e;
  --sp-primary-fg: #ffffff;
  --sp-secondary: rgba(255,255,255,0.08);
  --sp-secondary-fg: #fafafa;
  --sp-muted: rgba(255,255,255,0.08);
  --sp-muted-fg: #a1a1aa;
  --sp-accent: rgba(255,255,255,0.08);
  --sp-accent-fg: #fafafa;
  --sp-destructive: #ef4444;
  --sp-destructive-fg: #fafafa;
  --sp-border: rgba(255,255,255,0.16);
  --sp-input: rgba(255,255,255,0.16);
  --sp-ring: #0f9d6e;
  --sp-brand: #0f9d6e;
  --sp-brand-accent: #f59e0b;
  --sp-sidebar: #18181b;
  --sp-sidebar-fg: #fafafa;
  --sp-sidebar-muted: #a1a1aa;
  --sp-sidebar-border: #27272a;
  --sp-sidebar-accent: #153d32;
  --sp-sidebar-accent-fg: #87ceb7;
  --sp-border-w: 1px;
  --sp-blur: blur(14px) saturate(160%);
  --sp-ring-w: 2px;
  --sp-grad: linear-gradient(95deg, #0f9d6e, #f59e0b);
  --sp-shadow-sm: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
  --sp-shadow: 0 8px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 0 18px 6px rgba(255,255,255,0.05);
  --sp-shadow-lg: 0 20px 50px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.28);
  --sp-shadow-btn: 0 10px 30px rgba(15, 157, 110, 0.4);
  --sp-scroll-thumb: rgba(255,255,255,.22);
  --sp-scroll-track: rgba(255,255,255,.05);
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 10px;
  --sp-font-h: 'Bricolage Grotesque', sans-serif;
  --sp-font-b: 'Plus Jakarta Sans', sans-serif;
  --sp-radius: 18px;
  --sp-space: 1;
  --sp-text-scale: 1;
  --sp-dur: 0.18s;
  --sp-ease: cubic-bezier(.4, 0, .2, 1);
  --sp-anim: 1;
  --sp-decor: 1;
  --brand: var(--sp-primary);
  --brand-ink: var(--sp-primary);
  --bg: var(--sp-bg);
  --panel: var(--sp-card);
  --line: var(--sp-border);
  --ink: var(--sp-fg);
  --muted: var(--sp-muted-fg);
}
:root {
  --sp-scroll-thumb: rgba(255,255,255,.55);
  --sp-scroll-track: rgba(255,255,255,.30);
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 10px;
}
:root:has(.sp-root.dark) {
  --sp-scroll-thumb: rgba(255,255,255,.22);
  --sp-scroll-track: rgba(255,255,255,.05);
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 10px;
}
/* Glass: il blur e' disponibile come token (--sp-blur). I componenti che vogliono l'effetto frosted
   possono usarlo (es. backdrop-filter: var(--sp-blur)). Esempio opt-in per le card del kit:
   .sp-root [data-slot="card"] { backdrop-filter: var(--sp-blur); } */
}