/* ─────────────────────────────────────────────────────────────────────────────
   Zypp · Base layer & brand utility helpers
   Body resets + the small set of brand utilities the product reuses across
   pages (eyebrow, font-display, hover-lift, accent helpers, shadow aliases).
   These mirror the production index.css so kit/component markup can rely on them.
   ───────────────────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--leading-normal);
}

::selection {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ── Display voice — Schibsted Grotesk, tight tracking ────── */
.font-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  font-feature-settings: var(--font-features-display);
}

/* ── Eyebrow — uppercase terracotta label above headings ──── */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: hsl(var(--primary));
}

/* ── Elevation utilities ──────────────────────────────────── */
.shadow-soft     { box-shadow: var(--shadow-soft); }
.shadow-card     { box-shadow: var(--shadow-card); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.shadow-glow     { box-shadow: var(--shadow-glow); }

/* ── Hover lift — cards rise 2px on hover ─────────────────── */
.hover-lift { transition: transform var(--duration-normal) var(--ease-standard),
                          box-shadow var(--duration-normal) var(--ease-standard); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }

/* ── Accent helpers (flattened — no diagonal gradients) ───── */
.gradient-bg   { background: hsl(var(--primary)); }
.warm-glow     { background: transparent; }
.gradient-text { color: hsl(var(--primary)); }

/* ── Entrance animations ──────────────────────────────────── */
.animate-fade-up         { animation: zypp-fade-up var(--duration-slow) var(--ease-out-soft) forwards; }
.animate-fade-up-delay-1 { animation: zypp-fade-up var(--duration-slow) var(--ease-out-soft) 0.08s forwards; opacity: 0; }
.animate-fade-up-delay-2 { animation: zypp-fade-up var(--duration-slow) var(--ease-out-soft) 0.16s forwards; opacity: 0; }
.animate-fade-up-delay-3 { animation: zypp-fade-up var(--duration-slow) var(--ease-out-soft) 0.24s forwards; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .animate-fade-up,
  .animate-fade-up-delay-1,
  .animate-fade-up-delay-2,
  .animate-fade-up-delay-3 { opacity: 1 !important; transform: none !important; }
}