/* ==========================================================================
   Alternivite Design System — Base
   CSS reset, typography scale, focus states, selection, scrollbar
   ========================================================================== */

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   color: var(--text-primary);
   background-color: var(--bg-primary);
   min-height: 100vh;
   transition: background-color var(--duration-slow) var(--ease-default),
               color var(--duration-slow) var(--ease-default);
}

img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}

input,
button,
textarea,
select {
   font: inherit;
   color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
}

a {
   color: inherit;
   text-decoration: none;
}

ul,
ol {
   list-style: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

button {
   cursor: pointer;
   border: none;
   background: none;
}

fieldset {
   border: none;
}

/* Remove focus ring for mouse users; keep for keyboard */
:focus:not(:focus-visible) {
   outline: none;
}

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

h1, .h1 {
   font-size: var(--text-5xl);
   font-weight: var(--font-extrabold);
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
}

h2, .h2 {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
}

h3, .h3 {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   line-height: var(--leading-snug);
}

h4, .h4 {
   font-size: var(--text-2xl);
   font-weight: var(--font-semibold);
   line-height: var(--leading-snug);
}

h5, .h5 {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   line-height: var(--leading-snug);
}

h6, .h6 {
   font-size: var(--text-lg);
   font-weight: var(--font-semibold);
   line-height: var(--leading-normal);
}

p {
   line-height: var(--leading-relaxed);
}

/* Lead paragraph — intro text */
.lead {
   font-size: var(--text-xl);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
}

/* Small text */
small, .small {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
}

/* Bold text */
strong, .font-bold {
   font-weight: var(--font-bold);
}

/* ==========================================================================
   FOCUS STATES — WCAG AA
   ========================================================================== */

:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
   background-color: var(--color-primary-200);
   color: var(--color-primary-900);
}

[data-theme="dark"] ::selection {
   background-color: var(--color-primary-800);
   color: var(--color-primary-100);
}

/* ==========================================================================
   SCROLLBAR — Webkit
   ========================================================================== */

::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-track {
   background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
   background: var(--color-neutral-300);
   border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--color-neutral-400);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
   background: var(--color-neutral-600);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
   background: var(--color-neutral-500);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@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;
   }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
   *,
   *::before,
   *::after {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
   }

   body {
      font-size: 12pt;
      line-height: 1.5;
   }

   a,
   a:visited {
      text-decoration: underline;
   }

   a[href]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      font-weight: normal;
   }

   a[href^="#"]::after,
   a[href^="javascript:"]::after {
      content: "";
   }

   .nav,
   .nav-mobile,
   .nav-overlay,
   .cookie-consent,
   .footer,
   .skip-link,
   .theme-toggle,
   .nav-toggle,
   .cta-section,
   .cta {
      display: none !important;
   }

   main {
      padding: 0 !important;
   }

   h1, h2, h3, h4 {
      page-break-after: avoid;
   }

   img {
      max-width: 100% !important;
      page-break-inside: avoid;
   }

   table {
      border-collapse: collapse;
   }

   .container {
      max-width: 100% !important;
      padding: 0 !important;
   }
}