/* U-Join design tokens — estratti dai mockup in docs/mockups. Importare in app/globals.css */
:root {
  /* Superfici */
  --page: #08080D;
  --bg: #0B0B14;
  --bg-elev: #15151F;
  --bg-elev-2: #1E1E2B;
  --border: #2A2A3A;
  --border-strong: #3D3D58;

  /* Testo */
  --text: #F5F5F7;
  --text-muted: #9A9AB0;
  --text-faint: #6F6F89;
  --text-soft: #C3C3D4;

  /* Brand */
  --primary: #8B5CF6;
  --primary-hover: #7C3AED;
  --primary-2: #A855F7;
  --accent: #22D3EE;

  /* Stati */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* Raggi */
  --radius-card: 16px;
  --radius-card-lg: 18px;
  --radius-input: 11px;
  --radius-button: 12px;
  --radius-cta: 14px;
  --radius-pill: 20px;

  /* Gradienti */
  --grad-brand: linear-gradient(135deg, #8B5CF6, #22D3EE);
  --grad-cta: linear-gradient(135deg, #8B5CF6, #A855F7);
  --grad-hero:
    radial-gradient(circle at 30% 20%, rgba(139, 92, 246, .55), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(34, 211, 238, .45), transparent 55%),
    linear-gradient(160deg, #1c1c3a, #0e0e1c);
  --grad-callout: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .10));
  --grad-media: linear-gradient(160deg, #241c3f, #0e0e1c);
  --grad-media-b: linear-gradient(160deg, #1c2f3f, #0e0e1c);

  /* Trasparenze semantiche */
  --success-soft: rgba(34, 197, 94, .14);
  --success-border: rgba(34, 197, 94, .35);
  --warning-soft: rgba(245, 158, 11, .14);
  --accent-soft: rgba(34, 211, 238, .14);
  --primary-soft: rgba(139, 92, 246, .22);
}

body {
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@keyframes uj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .uj-spin { animation: none !important; }
}