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

:root {
  --dd-primary:        #DC2626;
  --dd-primary-dark:   #B91C1C;
  --dd-primary-light:  #FEE2E2;

  --dd-secondary:      #1D4ED8;
  --dd-secondary-dark: #1E40AF;
  --dd-secondary-light: #DBEAFE;

  --dd-accent:         #D97706;
  --dd-accent-dark:    #B45309;
  --dd-accent-light:   #FEF3C7;

  --dd-gray-50:  #FAFAFA;
  --dd-gray-100: #F5F5F5;
  --dd-gray-200: #E5E5E5;
  --dd-gray-300: #D4D4D4;
  --dd-gray-400: #A3A3A3;
  --dd-gray-500: #737373;
  --dd-gray-600: #525252;
  --dd-gray-700: #404040;
  --dd-gray-800: #262626;
  --dd-gray-900: #171717;

  --dd-bg:              #FFFFFF;
  --dd-bg-secondary:    #F7F7F5;
  --dd-bg-tertiary:     #F0F0F0;
  --dd-fg:              #37352F;
  --dd-fg-secondary:    #787774;
  --dd-fg-inverse:      #FFFFFF;
  --dd-border:          #E9E9E7;
  --dd-border-strong:   #D4D4D4;
  --dd-hover:           rgba(55, 53, 47, 0.08);
  --dd-link:            #EF4444;

  --dd-overlay-light:  rgba(255,255,255,0.95);
  --dd-overlay-medium: rgba(255,255,255,0.80);

  --dd-font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dd-font-mono: ui-monospace, SFMono-Regular, Monaco, Consolas, 'PT Mono', 'Liberation Mono', Courier, monospace;

  --dd-text-xs:  0.75rem;
  --dd-text-sm:  0.875rem;
  --dd-text-base:1rem;
  --dd-text-lg:  1.125rem;
  --dd-text-xl:  1.25rem;
  --dd-text-2xl: 1.5rem;
  --dd-text-3xl: 2rem;
  --dd-text-4xl: 2.5rem;

  --dd-leading-tight:   1.2;
  --dd-leading-normal:  1.5;
  --dd-leading-relaxed: 1.7;

  --dd-space-1:  0.25rem;
  --dd-space-2:  0.5rem;
  --dd-space-3:  0.75rem;
  --dd-space-4:  1rem;
  --dd-space-5:  1.25rem;
  --dd-space-6:  1.5rem;
  --dd-space-8:  2rem;
  --dd-space-10: 2.5rem;
  --dd-space-12: 3rem;
  --dd-space-16: 4rem;

  --dd-radius-sm:   4px;
  --dd-radius-md:   8px;
  --dd-radius-lg:   12px;
  --dd-radius-xl:   16px;
  --dd-radius-full: 9999px;

  --dd-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --dd-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --dd-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --dd-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  --dd-transition-fast: 0.15s ease;
  --dd-transition-base: 0.2s ease;
  --dd-transition-slow: 0.3s ease;

  --dd-container-max: 1024px;

  --tap-min: 48px;
}

* { box-sizing: border-box; }

html { font-size: 16px; line-height: 1.5; }

body {
  margin: 0;
  font-family: var(--dd-font-sans);
  font-size: var(--dd-text-base);
  line-height: var(--dd-leading-normal);
  color: var(--dd-fg);
  background: var(--dd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--dd-space-8) var(--dd-space-5);
  position: relative;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: var(--dd-leading-tight);
  margin: 0 0 var(--dd-space-4);
  color: var(--dd-fg);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.75rem, 5vw, var(--dd-text-4xl)); }
h2 { font-size: clamp(1.25rem, 3vw, var(--dd-text-2xl)); }
h3 { font-size: var(--dd-text-lg); font-weight: 600; }

p { margin: 0 0 var(--dd-space-4); line-height: var(--dd-leading-relaxed); }

a {
  color: var(--dd-link);
  text-decoration: none;
  transition: color var(--dd-transition-fast);
}
a:hover { color: var(--dd-primary-dark); }
a:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 2px; }

strong, b { font-weight: 700; }

::selection { background: var(--dd-primary); color: #fff; }

/* ---------- Dyson-style watermark surface ---------- */
.dyson-surface {
  position: relative;
  background: var(--dd-bg-secondary);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-lg);
  padding: var(--dd-space-10) var(--dd-space-6);
  overflow: hidden;
  text-align: center;
  margin-bottom: var(--dd-space-8);
}
.dyson-surface::before {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0.55;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(55,53,47,0.06) 6px 7px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(55,53,47,0.04) 9px 10px);
}
.dyson-surface > * { position: relative; }

/* ---------- Buttons ---------- */
button,
.btn,
.share-link,
a[hx-post] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.75rem 1.25rem;
  margin: 0.25rem 0;
  border: 0;
  border-radius: var(--dd-radius-md);
  background: var(--dd-primary);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--dd-text-base);
  cursor: pointer;
  box-shadow: var(--dd-shadow-xs), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform var(--dd-transition-fast),
              box-shadow var(--dd-transition-base),
              background var(--dd-transition-base);
}
button:hover,
.btn:hover,
.share-link:hover,
a[hx-post]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(220,38,38,0.45);
  background: var(--dd-primary-dark);
  color: #fff;
}
button:active,
.btn:active,
.share-link:active,
a[hx-post]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--dd-shadow-xs);
}
button:focus-visible,
.btn:focus-visible,
.share-link:focus-visible {
  outline: 2px solid var(--dd-primary);
  outline-offset: 2px;
}

/* ---------- Quiz: question form ---------- */
#domanda { animation: riseIn 0.35s cubic-bezier(.2,.7,.2,1) both; }
#domanda form {
  display: flex;
  flex-direction: column;
  gap: var(--dd-space-3);
  margin-top: var(--dd-space-6);
}
#domanda form button {
  background: var(--dd-bg);
  color: var(--dd-fg);
  border: 1px solid var(--dd-border-strong);
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
  padding: var(--dd-space-4) var(--dd-space-5);
  box-shadow: var(--dd-shadow-xs);
}
#domanda form button:hover {
  background: var(--dd-bg-secondary);
  color: var(--dd-fg);
  border-color: var(--dd-primary);
  transform: translateY(-1px);
  box-shadow: var(--dd-shadow-md);
}

.progresso {
  font-family: var(--dd-font-mono);
  font-size: var(--dd-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dd-fg-secondary);
  margin: 0 0 var(--dd-space-2);
}

/* ---------- Result page ---------- */
#sticker-section,
#gate-section,
#share-section {
  margin-top: var(--dd-space-8);
  padding: var(--dd-space-6);
  background: var(--dd-bg-secondary);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-lg);
}

#sticker-section img {
  margin: var(--dd-space-4) auto 0;
  border-radius: var(--dd-radius-md);
  box-shadow: var(--dd-shadow-md);
}

#share-section h2 { margin-top: 0; }

.share-link {
  margin-right: var(--dd-space-2);
  margin-bottom: var(--dd-space-2);
}
.share-link.share-whatsapp { background: #25D366; }
.share-link.share-whatsapp:hover { background: #1FAE53; }
.share-link.share-telegram { background: #229ED9; }
.share-link.share-telegram:hover { background: #1B86B8; }
.share-link.share-x { background: var(--dd-gray-900); }
.share-link.share-x:hover { background: var(--dd-gray-800); }
.share-link.share-facebook { background: #1877F2; }
.share-link.share-facebook:hover { background: #145DBF; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Footer ---------- */
footer {
  margin-top: var(--dd-space-12);
  text-align: center;
  color: var(--dd-fg-secondary);
  font-size: var(--dd-text-sm);
}
footer a { color: var(--dd-fg-secondary); }
footer a:hover { color: var(--dd-primary); }

.partner-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--dd-space-3);
  margin: var(--dd-space-10) auto var(--dd-space-4);
  padding: var(--dd-space-5);
  border-top: 1px solid var(--dd-border);
  font-size: var(--dd-text-sm);
  color: var(--dd-fg);
}
.partner-footer .partner {
  display: flex;
  align-items: center;
  gap: var(--dd-space-2);
  color: inherit;
  text-decoration: none;
}
.partner-footer a.partner:hover { color: var(--dd-primary); }
.partner-footer .logo-placeholder {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dd-border-strong);
  border-radius: var(--dd-radius-full);
  background: var(--dd-bg);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dd-fg-secondary);
  letter-spacing: 0.05em;
}
.partner-footer .partner-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: var(--dd-radius-full);
  background: var(--dd-bg);
}
.partner-footer .partner-logo--wide {
  width: auto;
  height: 2rem;
  border-radius: 0;
  background: transparent;
}
.partner-footer .partner-x {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dd-primary);
}

/* ---------- Animations ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dd-transition-fast: 0s;
    --dd-transition-base: 0s;
    --dd-transition-slow: 0s;
  }
  #domanda { animation: none; }
}