/* ==========================================================================
   SUNBird Modular Furniture — foundation layer (v2, light)
   Tokens derived from the live site: brass #DFB163, charcoal #252531,
   ink #181818, logo terracotta #EC844C, cream #FDFBF7
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"],
ol[role="list"] { list-style: none; margin: 0; padding: 0; }

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

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

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

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

/* Author rules like `.drawer { display: flex }` out-specify the UA sheet's
   [hidden] { display: none }, which silently leaves "hidden" content focusable. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  text-wrap: balance;
  font-weight: inherit;
}

p { text-wrap: pretty; }

:target { scroll-margin-top: 6rem; }

/* ---------- tokens ---------- */
:root {
  /* brand — scraped from sunbirdmodularfurniture.com */
  --brass:        #DFB163;   /* fills, rules, large text on dark */
  --brass-lit:    #F0CB8E;
  --brass-deep:   #A97F3C;   /* large text on cream (3.5:1) */
  --brass-ink:    #8C6A2F;   /* small labels on cream (4.8:1) */
  --terracotta:   #EC844C;
  --charcoal:     #252531;
  --ink:          #181818;
  --cream:        #FDFBF7;

  /* light ground */
  --bg:           #FDFBF7;
  --bg-raise:     #F5F0E6;
  --bg-card:      #FFFFFF;
  --line:         rgba(169, 127, 60, .38);
  --line-soft:    rgba(24, 24, 24, .09);

  --fg:           #181818;
  --fg-muted:     #5F5951;
  --fg-dim:       #8E877C;   /* decorative only — not for small copy */

  /* dark band (charcoal) — applied by .band-dark via re-scoped tokens */
  --dk-bg:        #252531;
  --dk-bg-raise:  #2E2E3C;
  --dk-fg:        #F2EDE4;
  --dk-muted:     #B3ACA0;
  --dk-line:      rgba(223, 177, 99, .28);
  --dk-line-soft: rgba(253, 251, 247, .11);

  /* type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid type scale — 375px → 1440px */
  --step--2: clamp(.69rem, .67rem + .09vw, .75rem);
  --step--1: clamp(.83rem, .79rem + .17vw, .94rem);
  --step-0:  clamp(1rem, .95rem + .23vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.11rem + .38vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.29rem + .64vw, 2rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.02vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.55vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.94rem + 2.31vw, 4.73rem);
  --step-6:  clamp(2.99rem, 2.18rem + 3.4vw, 6.31rem);
  --step-7:  clamp(3.58rem, 2.4rem + 4.95vw, 8.41rem);

  /* space */
  --gutter: clamp(1.25rem, .9rem + 1.5vw, 3rem);
  --bay:    clamp(4.5rem, 3rem + 6.5vw, 10rem);
  --max:    82rem;
  --max-text: 38rem;

  /* motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.76, 0, .24, 1);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .7s;
}

/* A section that flips to charcoal: every shared component reads the
   re-scoped tokens, so buttons, fields, rules and eyebrows adapt on their own. */
.band-dark {
  background: var(--dk-bg);
  color: var(--dk-fg);
  --fg: var(--dk-fg);
  --fg-muted: var(--dk-muted);
  --fg-dim: var(--dk-muted);
  --line: var(--dk-line);
  --line-soft: var(--dk-line-soft);
  --bg: var(--dk-bg);
  --bg-raise: var(--dk-bg-raise);
  --bg-card: var(--dk-bg-raise);
  --brass-ink: var(--brass);
  --brass-deep: var(--brass);
}

.band-raise { background: var(--bg-raise); }

/* ---------- base ---------- */
html {
  /* Lenis drives scrolling; native smooth-scroll would fight it. */
  scroll-behavior: auto;
  /* keeps focus-driven scrolls clear of the fixed header */
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- shared primitives ---------- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
}

.bay { padding-block: var(--bay); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass-ink);
  display: flex;
  align-items: center;
  gap: .85em;
}

.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3.25rem);
  height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
}

.display em {
  font-style: italic;
  color: var(--brass-deep);
}

.lede {
  color: var(--fg-muted);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: var(--max-text);
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* scroll targets get focus so the keyboard follows the page; no ring on them */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: 0; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 999;
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible { transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}