/*
 * Base styles for Hund i bevegelse: element defaults, text styles and layout.
 * Uses only tokens from tokens.css (design system v2.2).
 *
 * Breakpoints (from the design README):
 *   desktop >= 1024px, tablet 768–1023px, mobile < 768px
 */

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

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

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

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

/* Page */
body {
  font: var(--text-body-medium);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  text-decoration: underline;
}

/* Focus: 2px green ring on every interactive element (design README) */
:focus-visible {
  outline: 2px solid var(--color-icon-primary);
  outline-offset: 2px;
}

/* Text styles: one class per Figma text style (generated from Figma) */
.text-display-hero { font: var(--text-display-hero); }
.text-display-hero-mobile { font: var(--text-display-hero-mobile); }
.text-heading-h1 { font: var(--text-heading-h1); }
.text-heading-h2 { font: var(--text-heading-h2); }
.text-heading-h3 { font: var(--text-heading-h3); }
.text-heading-h4 { font: var(--text-heading-h4); }
.text-eyebrow { font: var(--text-eyebrow); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; }
.text-body-large { font: var(--text-body-large); }
.text-body-medium { font: var(--text-body-medium); }
.text-body-small { font: var(--text-body-small); }
.text-label-button { font: var(--text-label-button); letter-spacing: var(--text-label-button-tracking); }
.text-label-nav { font: var(--text-label-nav); }
.text-caption { font: var(--text-caption); }
.text-display-price { font: var(--text-display-price); }
.text-heading-h1-mobile { font: var(--text-heading-h1-mobile); }
.text-heading-h2-mobile { font: var(--text-heading-h2-mobile); }
.text-body-intro { font: var(--text-body-intro); }
.text-label-medium { font: var(--text-label-medium); }
.text-label-small { font: var(--text-label-small); }
.text-label-button-small { font: var(--text-label-button-small); letter-spacing: var(--text-label-button-small-tracking); }
.text-label-nav-small { font: var(--text-label-nav-small); }
.text-eyebrow-small { font: var(--text-eyebrow-small); letter-spacing: var(--text-eyebrow-small-tracking); text-transform: uppercase; }
.text-quote { font: var(--text-quote); }
.text-label-medium-underline { font: var(--text-label-medium-underline); text-decoration: underline; }
.text-label-small-underline { font: var(--text-label-small-underline); text-decoration: underline; }

.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-text-accent); }

/* Element defaults map to the heading styles */
h1 { font: var(--text-heading-h1); }
h2 { font: var(--text-heading-h2); }
h3 { font: var(--text-heading-h3); }
h4 { font: var(--text-heading-h4); }

/* Long Norwegian compound words must not push narrow screens sideways */
h1, h2, h3 {
  overflow-wrap: break-word;
}

/* Tablet uses the desktop styles, except the home hero, which steps down to Heading/H1 */
@media (max-width: 1023px) {
  .text-display-hero { font: var(--text-heading-h1); }
}

/* Mobile heading styles */
@media (max-width: 767px) {
  .text-display-hero { font: var(--text-display-hero-mobile); }
  h1, .text-heading-h1 { font: var(--text-heading-h1-mobile); }
  h2, .text-heading-h2 { font: var(--text-heading-h2-mobile); }
}

/* Layout: margins, content width and section padding come from the layout
   tokens, which change per breakpoint in tokens.css */
.container {
  width: 100%;
  max-width: calc(var(--layout-content-max) + 2 * var(--layout-margin));
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

.section {
  padding-block: var(--layout-section-y);
}

.section--surface { background: var(--color-bg-surface); }
.section--tinted  { background: var(--color-bg-section); }
.section--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }

/* content-max describes the tablet/mobile frames (834/393), not a cap:
   below desktop the content flows between the side margins */
@media (max-width: 1023px) {
  .container {
    max-width: none;
  }
}

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Scroll fade-in (design README): content below the first section rises in.
   Only active with the "motion" class, which is skipped for reduced motion. */
.motion .reveal {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  transition:
    opacity var(--duration-slow) var(--ease-entrance),
    transform var(--duration-slow) var(--ease-entrance);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media print {
  .motion .reveal {
    opacity: 1;
    transform: none;
  }
}