/* ============================================================
   METIS — Design System
   Palette navy + oro/arancio: sobria, istituzionale, premium.
   Sorgente unica del tema per l'hub e per tutte le tessere:
   le tessere importano questo file e rimappano le proprie
   variabili sui token --pr-* qui sotto.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- superfici: blu notte ---- */
  --pr-bg: #0a1120;
  --pr-bg-2: #0e1830;
  --pr-bg-3: #13203c;
  --pr-card: rgba(23, 38, 66, 0.55);
  --pr-card-solid: #13203c;

  /* ---- bordi ---- */
  --pr-border: rgba(120, 150, 200, 0.16);
  --pr-border-hover: rgba(232, 163, 61, 0.5);

  /* ---- accento primario: oro/arancio ---- */
  --pr-primary: #e8a33d;
  --pr-primary-dark: #c9852a;
  --pr-primary-light: rgba(232, 163, 61, 0.14);

  /* ---- semantici (stati) ---- */
  --pr-success: #4bb98a;
  --pr-success-light: rgba(75, 185, 138, 0.14);
  --pr-warning: #e8a33d;
  --pr-warning-light: rgba(232, 163, 61, 0.14);
  --pr-danger: #e06a5c;
  --pr-danger-light: rgba(224, 106, 92, 0.14);

  /* ---- testo: bianchi e grigi freddi ---- */
  --pr-text: #eef2f9;
  --pr-text-muted: #9fb0cc;
  --pr-text-light: #64748f;
  --pr-gray: #7e8ba8;

  /* ---- forma ---- */
  --pr-font: 'Inter', system-ui, -apple-system, sans-serif;
  --pr-radius-sm: 8px;
  --pr-radius: 14px;
  --pr-radius-lg: 20px;

  /* ---- profondità: ombre nette + vetro ---- */
  --pr-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(120,150,200,0.06);
  --pr-shadow-md: 0 8px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(120,150,200,0.08);
  --pr-shadow-lg: 0 20px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(120,150,200,0.1);
  --pr-glow: 0 0 28px rgba(232, 163, 61, 0.22);
  --pr-glow-success: 0 0 24px rgba(75, 185, 138, 0.2);

  /* ---- atmosfera: aloni sobri, non neon ----
     Un caldo oro in alto, un blu freddo in basso: profondità
     senza il "fantascientifico" del render. */
  --pr-ambient:
    radial-gradient(ellipse at 25% 12%, rgba(232,163,61,0.07) 0%, transparent 46%),
    radial-gradient(ellipse at 78% 88%, rgba(40,80,150,0.10) 0%, transparent 50%);

  --pr-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --pr-transition-lento: 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   TEMA CHIARO — navy tenue su ghiaccio, l'oro resta l'accento
   ============================================================ */

[data-theme="light"] {
  --pr-bg: #eef1f7;
  --pr-bg-2: #e3e8f1;
  --pr-bg-3: #ffffff;
  --pr-card: rgba(255, 255, 255, 0.9);
  --pr-card-solid: #ffffff;

  --pr-border: rgba(30, 58, 95, 0.16);
  --pr-border-hover: rgba(201, 133, 42, 0.5);

  --pr-primary: #c9852a;
  --pr-primary-dark: #a86d1e;
  --pr-primary-light: rgba(201, 133, 42, 0.12);
  --pr-success: #2f9670;
  --pr-success-light: rgba(47, 150, 112, 0.1);
  --pr-warning: #c9852a;
  --pr-warning-light: rgba(201, 133, 42, 0.12);
  --pr-danger: #c1483c;
  --pr-danger-light: rgba(193, 72, 60, 0.1);

  --pr-text: #14203a;
  --pr-text-muted: #46577a;
  --pr-text-light: #6c7a97;
  --pr-gray: #5c6a88;

  --pr-shadow: 0 2px 10px rgba(20,32,58,0.08), 0 0 0 1px rgba(30,58,95,0.05);
  --pr-shadow-md: 0 8px 28px rgba(20,32,58,0.12), 0 0 0 1px rgba(30,58,95,0.07);
  --pr-shadow-lg: 0 20px 56px rgba(20,32,58,0.16), 0 0 0 1px rgba(30,58,95,0.09);
  --pr-glow: 0 0 24px rgba(201, 133, 42, 0.18);
  --pr-glow-success: 0 0 24px rgba(47, 150, 112, 0.16);

  --pr-ambient:
    radial-gradient(ellipse at 25% 12%, rgba(201,133,42,0.06) 0%, transparent 46%),
    radial-gradient(ellipse at 78% 88%, rgba(40,80,150,0.06) 0%, transparent 50%);
}

/* ============================================================
   LA TERZINA — una tinta, tre intensità (15% velo / pieno / 30% bordo)
   ============================================================ */

.pr-tag {
  --t: var(--pr-primary);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--pr-radius-sm);
  background: color-mix(in srgb, var(--t) 15%, transparent);
  color: var(--t);
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
  white-space: nowrap;
}

/* ============================================================
   ANIMAZIONI — sobrie, coerenti con la landing
   ============================================================ */

@keyframes pr-fade-su {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pr-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pr-galleggia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* entrata in cascata: aggiungi .pr-entra e --i:<indice> agli elementi */
.pr-entra {
  opacity: 0;
  animation: pr-fade-su 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--pr-font);
  background: var(--pr-bg);
  background-image: var(--pr-ambient);
  background-attachment: fixed;
  color: var(--pr-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pr-primary); text-decoration: none; }
button { font-family: var(--pr-font); cursor: pointer; }
input, select, textarea { font-family: var(--pr-font); }

:focus-visible {
  outline: 2px solid var(--pr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}