/* ============================================================
   FULLY — Design Tokens
   Fonte unica della verità per colori, spaziature, tipografia.
   Ricavati dal design premium esistente (navy + oro + glass).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- Colori brand --- */
  --bg-1: #030611;
  --bg-2: #071127;
  --bg-3: #101b45;
  --bg-4: #162766;

  --gold: #f7d548;
  --gold-2: #ffbf00;
  --blue: #2f8fff;
  --blue-soft: #58b8ff;

  --white: #ffffff;
  --ink: #08111f;

  /* --- Stati semantici --- */
  --ok: #36d399;
  --ok-2: #18b385;
  --err: #ff6b6b;
  --err-2: #e23d3d;
  --warn: #ffb020;

  /* --- Superfici (glass) --- */
  --card: rgba(9, 15, 38, 0.74);
  --card-2: rgba(255, 255, 255, 0.06);
  --card-3: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.10);

  /* --- Ombre --- */
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --shadow-strong: 0 30px 90px rgba(0, 0, 0, 0.54);
  --shadow-gold: 0 18px 36px rgba(255, 191, 0, 0.24);

  /* --- Tipografia --- */
  --font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* --- Raggi --- */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* --- Spaziature --- */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 16px;
  --sp-4: 22px;
  --sp-5: 32px;
  --sp-6: 48px;

  /* --- Layout --- */
  --maxw: 1320px;
  --maxw-narrow: 720px;
  --header-h: 68px;

  /* --- Transizioni --- */
  --t-fast: 0.18s ease;
  --t: 0.25s ease;
  --t-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Gradienti riutilizzabili --- */
  --grad-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  --grad-bg: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 34%, var(--bg-3) 72%, var(--bg-4) 100%);
  --grad-blue: linear-gradient(135deg, var(--blue) 0%, var(--blue-soft) 100%);

  /* --- Palette estesa: tinte/toni per profondità e coerenza (Polish 2.0) --- */
  --gold-tint: #fff3c2;
  --gold-shade: #b9740a;
  --blue-tint: #8fd0ff;
  --blue-shade: #12408f;
  --purple: #7b2ff0;
  --purple-2: #c56bff;
  --pink: #ff3d6e;
  --pink-2: #ff9d2e;
  --orange: #f5872a;
  --orange-2: #ff9d5c;
  --green: #23a55a;
  --green-2: #4fd483;
  --ink-outline: #160a2e;

  /* --- Ombre a più livelli: bevel "ciccione" riutilizzabile ovunque --- */
  --bevel-hi: inset 0 2px 0 rgba(255, 255, 255, 0.35);
  --bevel-lo: inset 0 -8px 12px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.4);
  --glow-gold: 0 0 22px rgba(247, 213, 72, 0.5);
  --glow-ok: 0 0 18px rgba(54, 211, 153, 0.5);
  --glow-blue: 0 0 18px rgba(47, 143, 255, 0.45);

  /* --- Curve di movimento "succose" (press bounce, pop) --- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.22, 1.2, 0.4, 1);
}

/* Accessibilità: riduce le animazioni se l'utente lo richiede */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}