@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: #fafafa;
  --sp-fg: #18181b;
  --sp-card: #ffffff;
  --sp-card-fg: #18181b;
  --sp-popover: #ffffff;
  --sp-popover-fg: #18181b;
  --sp-primary: #0f9d6e;
  --sp-primary-fg: #ffffff;
  --sp-secondary: #f4f4f5;
  --sp-secondary-fg: #18181b;
  --sp-muted: #f4f4f5;
  --sp-muted-fg: #71717a;
  --sp-accent: #f4f4f5;
  --sp-accent-fg: #18181b;
  --sp-destructive: #e7000b;
  --sp-destructive-fg: #ffffff;
  --sp-border: #e4e4e7;
  --sp-input: #e4e4e7;
  --sp-ring: #0f9d6e;
  --sp-brand: #0f9d6e;
  --sp-brand-accent: #f59e0b;
  --sp-sidebar: #095b40;
  --sp-sidebar-fg: rgba(255,255,255,.92);
  --sp-sidebar-muted: rgba(255,255,255,.62);
  --sp-sidebar-border: rgba(255,255,255,.13);
  --sp-sidebar-accent: rgba(255,255,255,.15);
  --sp-sidebar-accent-fg: #ffffff;
  --sp-border-w: 1px;
  --sp-blur: none;
  --sp-ring-w: 2px;
  --sp-grad: linear-gradient(110deg, #0f9d6e, #f59e0b);
  --sp-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --sp-shadow: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --sp-shadow-lg: 0 10px 25px rgba(16,24,40,.10), 0 6px 12px rgba(16,24,40,.06);
  --sp-shadow-btn: 0 6px 16px rgba(15, 157, 110, 0.3);
  --sp-scroll-thumb: #d4d4d8;
  --sp-scroll-track: transparent;
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 8px;
  --sp-font-h: 'Outfit', sans-serif;
  --sp-font-b: 'DM Sans', sans-serif;
  --sp-radius: 12px;
  --sp-space: 1;
  --sp-text-scale: 1;
  --sp-dur: 0.18s;
  --sp-ease: cubic-bezier(.4, 0, .2, 1);
  --sp-anim: 1;
  --sp-decor: 0;
  --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: #09090b;
  --sp-fg: #fafafa;
  --sp-card: #18181b;
  --sp-card-fg: #fafafa;
  --sp-popover: #18181b;
  --sp-popover-fg: #fafafa;
  --sp-primary: #0f9d6e;
  --sp-primary-fg: #ffffff;
  --sp-secondary: #27272a;
  --sp-secondary-fg: #fafafa;
  --sp-muted: #18181b;
  --sp-muted-fg: #a1a1aa;
  --sp-accent: #27272a;
  --sp-accent-fg: #fafafa;
  --sp-destructive: #ef4444;
  --sp-destructive-fg: #fafafa;
  --sp-border: #27272a;
  --sp-input: #27272a;
  --sp-ring: #0f9d6e;
  --sp-brand: #0f9d6e;
  --sp-brand-accent: #f59e0b;
  --sp-sidebar: #095b40;
  --sp-sidebar-fg: rgba(255,255,255,.92);
  --sp-sidebar-muted: rgba(255,255,255,.62);
  --sp-sidebar-border: rgba(255,255,255,.13);
  --sp-sidebar-accent: rgba(255,255,255,.15);
  --sp-sidebar-accent-fg: #ffffff;
  --sp-border-w: 1px;
  --sp-blur: none;
  --sp-ring-w: 2px;
  --sp-grad: linear-gradient(110deg, #0f9d6e, #f59e0b);
  --sp-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --sp-shadow: 0 2px 8px rgba(0,0,0,.55);
  --sp-shadow-lg: 0 18px 44px rgba(0,0,0,.6);
  --sp-shadow-btn: 0 6px 16px rgba(15, 157, 110, 0.5);
  --sp-scroll-thumb: #3f3f46;
  --sp-scroll-track: transparent;
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 8px;
  --sp-font-h: 'Outfit', sans-serif;
  --sp-font-b: 'DM Sans', sans-serif;
  --sp-radius: 12px;
  --sp-space: 1;
  --sp-text-scale: 1;
  --sp-dur: 0.18s;
  --sp-ease: cubic-bezier(.4, 0, .2, 1);
  --sp-anim: 1;
  --sp-decor: 0;
  --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: #d4d4d8;
  --sp-scroll-track: transparent;
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 8px;
}
:root:has(.sp-root.dark) {
  --sp-scroll-thumb: #3f3f46;
  --sp-scroll-track: transparent;
  --sp-scroll-width: 11px;
  --sp-scroll-radius: 8px;
}
/* Vibrant: look tutto nei token (rail di brand + contenuto neutro). Nessuna regola statica. */
}