/* ===========================================================================
   Marroquin Markedsføring — base.css
   Reset, base typography (DM Serif Display + DM Sans), buttons, primitives.
   Depends on tokens.css.
   =========================================================================== */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
:where(ul, ol) { list-style: none; }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* Slim, quiet scrollbar (Windows default is heavy) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-rule-strong);
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-faint); }

/* ---- Base typography · serif display, sans body ------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { text-wrap: pretty; }
strong { font-weight: 700; color: inherit; }
em { font-style: italic; }

/* ---- Type utilities ----------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-serif { font-family: var(--font-display); font-weight: 400; }

.t-label,
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.t-label { color: var(--color-faint); }
.kicker  { color: var(--color-accent); }

.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: var(--measure);
}
.t-muted { color: var(--color-muted); }

/* Big serif section title */
.section-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}
.section-title em { color: var(--color-accent); }

/* ---- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.75rem);
}
.container--narrow { max-width: 980px; }

.section { padding-block: clamp(5.5rem, 8vw, 8rem); }
.section--tight { padding-block: var(--space-2xl); }
.section--band { background: var(--color-paper-2); }
.section--band-2 { background: var(--color-paper-3); }
.section__intro { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__intro .kicker { display: inline-block; margin-bottom: var(--space-md); }
.section__intro .t-lead { margin-top: var(--space-md); }

.rule { height: 1px; background: var(--color-rule); border: 0; }

/* ---- Buttons (s360 pill) ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-accent); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn--ghost:hover { border-color: var(--color-ink); }

/* On dark surfaces */
.btn--on-dark { background: #fff; color: var(--color-ink); border-color: #fff; }
.btn--on-dark:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--outline-light:hover { border-color: #fff; }

.btn--lg { padding: 1.05rem 2rem; }
.btn--block { display: flex; width: 100%; }

/* Typographic link CTA */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-accent);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.link-cta svg { width: 1em; height: 1em; transition: transform var(--dur-short) var(--ease-out); }
.link-cta:hover { border-bottom-color: currentColor; }
.link-cta:hover svg { transform: translateX(3px); }
.link-cta--light { color: #fff; }

/* ---- Focus (instant) ---------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* ---- A11y helpers -------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-md); top: -3.5rem; z-index: var(--z-top);
  background: var(--color-ink); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  transition: top var(--dur-short) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

/* ---- Scroll reveal (progressive enhancement) ---------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}