/* ==========================================================================
   Design Tokens & Breakpoints
   ========================================================================== */
:root {
  /* Breakpoint Tokens (referência — media queries não aceitam var()) */
  --bp-mobile: 360px;
  --bp-tablet-portrait: 768px;
  --bp-tablet-landscape: 1024px;
  --bp-desktop: 1440px;
  --bp-ultrawide: 1920px;

  /* Cores — tirados da sala: parede creme, quadros escuros, latão da cadeira */
  --color-bg: #eee5d6;
  --color-surface: #fbf7f0;
  --color-ink: #1d1a17;
  --color-ink-soft: rgb(29 26 23 / 0.72);
  --color-muted: rgb(29 26 23 / 0.56);
  --color-line: rgb(29 26 23 / 0.12);
  --color-gold: #a87a2e;
  --color-gold-soft: #d8bf8f;
  --color-olive: #4e553f;
  --color-olive-dark: #3a4030;
  --color-night: #1a1714;
  --color-night-ink: #efe6d6;

  /* Tipografia */
  --font-display: "Instrument Serif", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-logo: clamp(3.75rem, 18vw, 6.5rem);
  --fs-h2: clamp(2.5rem, 9vw, 4rem);
  --fs-statement: clamp(1.625rem, 10.5vw, 3.5rem);
  --fs-h3: clamp(1.625rem, 5.8vw, 2.125rem);
  --fs-price: clamp(1.625rem, 5.4vw, 2.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Movimento */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  /* Espaçamentos e Largura Máxima */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(4rem, 12vw, 9rem);

  --container-gutter: 1rem;
  --container-max-width: 1360px;
  --radius: 0.75rem;
}

/* 1. Mobile Pequeno (>= 360px) */
@media (min-width: 360px) {
  :root {
    --container-gutter: 1.25rem;
  }
}

/* 2. Tablet Portrait (>= 768px) */
@media (min-width: 768px) {
  :root {
    --container-gutter: 2rem;
    --fs-body: 1.0625rem;
    --fs-logo: clamp(8.5rem, 20vw, 13rem);
    --fs-h2: clamp(3.5rem, 7vw, 5.5rem);
    --fs-statement: clamp(3rem, 6vw, 5rem);
  }
}

/* 3. Tablet Landscape / Laptop (>= 1024px) */
@media (min-width: 1024px) {
  :root {
    --container-gutter: 2.5rem;
    --fs-logo: 14vw;
  }
}

/* 4. Desktop (>= 1440px) */
@media (min-width: 1440px) {
  :root {
    --container-gutter: 3rem;
    --fs-body: 1.125rem;
    --fs-h2: 6rem;
    --fs-statement: 5.5rem;
  }
}

/* 5. Ultra-Wide (>= 1920px) */
@media (min-width: 1920px) {
  :root {
    --container-gutter: 4rem;
    --container-max-width: 1680px;
    --fs-logo: 17rem;
    --fs-h2: 7rem;
    --fs-statement: 6.5rem;
  }
}