/* ============================================
   H&O Living — Tokens + Reset
   ============================================ */
:root {
  /* Brand palette */
  --bg:          #faf8f5;     /* dezenteres Off-White (Unterseiten) */
  --surface:     #f5f3ef;
  --surface-2:   #ece8e2;
  --ink:         #1c1714;
  --ink-muted:   #5a5047;
  --mute:        #7a6f65;
  --line:        #e6e1db;
  --line-strong: #d5cfc8;
  --accent:      #b48b74;      /* bronze */
  --accent-hover:#8a6550;      /* copper */
  --accent-soft: #f5ede7;
  --white:       #ffffff;
  --black:       #0c0a08;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.5rem;    /* 24 */
  --fs-xl:   2rem;      /* 32 */
  --fs-2xl:  3rem;      /* 48 */
  --fs-3xl:  4.5rem;    /* 72 */
  --fs-4xl:  6rem;      /* 96 — hero */

  /* Space */
  --pad-x:        clamp(1.25rem, 10vw, 12rem);
  --section-pad:  clamp(5rem, 10vw, 10rem);
  --radius:       4px;

  /* Inhaltsbreite für Cap auf Ultra-Wide. */
  --content-max:  1600px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -0.025em; font-weight: 500; }

/* Utility */
.u-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.u-muted { color: var(--mute); }
.u-small { font-size: var(--fs-sm); }
.u-center { text-align: center; }
.u-container { padding-inline: var(--pad-x); max-width: 1600px; margin-inline: auto; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Ultra-Wide Cap ───────────────────────────
   Auf sehr breiten Bildschirmen (≥ 1800px) wird --pad-x so erhöht,
   dass der Inhaltsbereich nie breiter als --content-max wird.
   Greift global überall dort, wo Sektionen --pad-x als horizontales
   Padding verwenden (Header, Footer, page-hero, listing, val-big,
   valuation, sell-hero, step-section, uu-hero, uu-story, timeline ...).
   ============================================ */
@media (min-width: 1800px) {
  :root {
    --pad-x: max(12rem, calc((100vw - var(--content-max)) / 2));
  }
}

/* Selection */
::selection { background: var(--ink); color: var(--accent-soft); }