/* quintaedizione.online — Base Styles */

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

/* ========================================================================
   RESET & BASE
   ======================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

h1 { font-size: clamp(1.75rem, 5vw, var(--text-4xl)); font-weight: var(--weight-bold); }
h2 { font-size: clamp(1.25rem, 3vw, var(--text-2xl)); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

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

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

strong, b { font-weight: var(--weight-bold); }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-4);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
pre code { padding: 0; background: transparent; }

ul, ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }
img { max-width: 100%; height: auto; display: block; }

/* ========================================================================
   LAYOUT
   ======================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (min-width: 640px) {
  .container { padding: 0 var(--space-6); }
}