/* ============================================================
   Aesthetics By Elena — Base styles
   Reset + element defaults + a handful of layout primitives.
   Consumes tokens from tokens.css. No component styles here.
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections clear the sticky nav. */
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: clip;            /* belt-and-braces; the 320px floor is enforced elsewhere */
}

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

img { font-style: italic; }    /* alt text shows in this style if the image breaks */

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

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

a { color: inherit; }

p, li { text-wrap: pretty; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
  /* Optical-size axis: scale slightly with size — set explicitly per heading via :where below. */
}

h1 {
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-display);
  font-variation-settings: "opsz" 100;
}

h2 {
  font-size: var(--fs-2xl);
  font-variation-settings: "opsz" 60;
}

h3 {
  font-size: var(--fs-xl);
  font-variation-settings: "opsz" 36;
}

h4 {
  font-size: var(--fs-lg);
  font-variation-settings: "opsz" 24;
}

h5, h6 {
  font-size: var(--fs-md);
  font-weight: var(--weight-medium);
  font-variation-settings: "opsz" 14;
}

/* ---------- Links ---------- */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: currentColor;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover { color: var(--plum); }

/* ---------- Focus ring (visible, on-brand) ---------- */
:focus { outline: 0; }

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

/* Skip-link target for keyboard users */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--plum);
  color: var(--text-on-plum);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  z-index: var(--z-toast);
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--plum);
  color: var(--cream);
}

/* ---------- Layout primitives ---------- */
.container,
.container-wide,
.container-prose {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container       { max-width: calc(var(--container) + (var(--gutter) * 2)); }
.container-wide  { max-width: calc(var(--container-wide) + (var(--gutter) * 2)); }
.container-prose { max-width: calc(var(--container-prose) + (var(--gutter) * 2)); }

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

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

/* Vertical rhythm helper — direct children get a uniform gap. */
.stack > * + * {
  margin-top: var(--stack-gap, var(--space-md));
}

/* Horizontal cluster (nav, button rows) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 50ch;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--weight-light);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tighter);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}

/* ---------- A11y utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Buttons (shared shell — variants live with components) ---------- */
.btn {
  --btn-bg: var(--plum);
  --btn-fg: var(--text-on-plum);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;                /* ≥44 tap target */
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.btn:hover {
  --btn-bg: var(--plum-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn:active {
  --btn-bg: var(--plum-active);
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--border-strong);
}

.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-border: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- Image placeholders (Phase 2)
   Visual stand-ins for the 9 Nano Banana 2 generations that arrive at the
   end of Phase 4. Phase 4 pages use the same aspect-ratio as the final
   image so layout stays stable when real images swap in.

   Usage:
     <div class="img-placeholder" style="aspect-ratio: 3 / 4" data-label="Hero · 3:4"></div>
     <div class="img-placeholder img-placeholder--hero" style="aspect-ratio: 3 / 4" data-label="Hero"></div>
     <div class="img-placeholder img-placeholder--warm" style="aspect-ratio: 4 / 3" data-label="Room · 4:3"></div>
     <div class="img-placeholder img-placeholder--cool" style="aspect-ratio: 3 / 4" data-label="Portrait"></div>
   ---------- */
.img-placeholder {
  display: block;                  /* lets the utility work on either div or span (HTML5: button can't contain div) */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;             /* sensible default; pages override inline */
  background: var(--grad-blush-lavender);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;              /* keep ::before/::after off page composite */
}

.img-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 25%, rgba(251, 246, 243, 0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.img-placeholder[data-label]::after {
  content: attr(data-label);
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--plum);
  opacity: 0.7;
  pointer-events: none;
}

.img-placeholder--hero { background: var(--grad-hero); }
.img-placeholder--warm { background: var(--grad-cream-blush); }
.img-placeholder--cool {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--blush) 100%);
}