/* ==========================================================================
   Mirage Furniture — Base / Reset
   CSS reset, box-sizing baseline, full-height html/body chain, no h-scroll.
   ========================================================================== */

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

/* Remove default margins everywhere. */
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

html {
  /* Smooth scrolling for anchor navigation between sections. */
  scroll-behavior: smooth;
  /* Never allow horizontal scroll: clip overflow without making a scrollbar. */
  overflow-x: clip;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-bg);
  /* Belt-and-braces: clip any horizontal overflow at the body too. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

p {
  line-height: var(--leading-normal);
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  list-style: none;
  padding: 0;
}

/* Skip link: parked off-screen until focused. Lives here rather than in a
   section stylesheet because every page carries the markup, and a page that
   loads the link without this rule renders it as a stray visible link in
   normal flow, pushing the content (on index.html, the full-height hero)
   down the page. */
.visually-hidden-focusable {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 60;                  /* above the fixed site header (z-index: 50) */
  padding: 0.5em 1em;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.visually-hidden-focusable:focus {
  transform: translateY(0);
}

/* --- Focus ring + browser surfaces ----------------------------------------
   The chrome the browser draws when we don't. The focus ring, the selection
   band, the caret, the scrollbar and native control accents all ship in
   system blue, which belongs to no design system and reads as unfinished
   next to the warm palette. Theme them here, once, for every page.

   :focus-visible rather than :focus, so a mouse click never paints a ring
   while keyboard (and any other non-pointer) input always does. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Over hero photography and the dark footer, bronze-on-dark is too quiet to
   act as a focus indicator. Switch to the light ink those surfaces use. */
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-hero-text);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-text-primary);
}

:root {
  /* Tells the browser to render form controls and the scrollbar light, so
     neither flips to a dark-UI treatment on a dark-themed OS. */
  color-scheme: light;
  /* Checkboxes, radios, range and progress, in bronze rather than blue. */
  accent-color: var(--color-accent);
  scrollbar-color: var(--color-hairline) var(--color-bg);
}

input,
textarea,
select {
  caret-color: var(--color-accent);
}

/* Honour users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}