@import url("components/print-furniture.css");

:root {
  --lt-crema: #fff7ec;
  --lt-crema-deep: #f8e8d2;
  --lt-blanco: #fff;
  --lt-noche: #2a1420;
  --lt-tinta: #211511;
  --lt-ink-soft: #5c4a3e;
  --lt-rosa: #ec2c91;
  --lt-rosa-bright: #f7549f;
  --lt-rosa-deep: #b81b6e;
  --lt-rouge: #8b1538;
  --lt-marigold: #e76f00;
  --lt-marigold-ink: #9a4a00;
  --lt-marigold-bright: #ffb25c;
  /*
   * Client-approved field/fill/accent colours. Never use jaune, pink-fizz,
   * or berry for running text on crema, blanco, or crema-deep: all three
   * fail the 4.5:1 body-text floor there. They may be used as text only on
   * noche/tinta, where their verified ratios range from 4.46:1 to 8.31:1.
   */
  --lt-jaune: #F2B119;
  --lt-pink-fizz: #ff0065;
  --lt-berry: #ff8dbe;
  --lt-crema-soft: #d9bfa8;
  --lt-hairline: #eddfc8;

  --surface-bg: var(--lt-crema);
  --surface-text: var(--lt-tinta);
  --surface-secondary: var(--lt-ink-soft);
  --surface-link: var(--lt-rosa-deep);

  --font-display: "StretchPro Punctuation", "StretchPro", "StretchPro Fallback", sans-serif;
  --font-body: "Archivo", Arial, sans-serif;
  --font-script: "Grand Hotel", cursive;
  --fs-display: clamp(3rem, 2.05rem + 4.1vw, 6rem);
  --fs-price-xl: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --fs-title: clamp(2rem, 1.62rem + 1.7vw, 3.25rem);
  --fs-card: clamp(1.375rem, 1.26rem + 0.5vw, 1.75rem);
  --fs-body-lg: clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-fine: 0.75rem;
  --fs-article-h2: clamp(1.375rem, 1.26rem + 0.4vw, 1.625rem);
  --fs-article-h3: 1.125rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2.55rem + 4.3vw, 7.5rem);

  --wrap: 75rem;
  --wrap-wide: 87.5rem;
  --wrap-text: 45rem;
  --measure: 70ch;
  --gutter: 1rem;

  --r-card: 1rem;
  --r-media: 0.625rem;
  --r-pill: 999px;
  --r-input: 0.75rem;
  --r-stamp: 0.25rem;
  --bw-frame: 2px solid var(--lt-tinta);
  --bw-hair: 1px solid var(--lt-hairline);
  --shadow-card: 0 1px 0 rgba(33, 21, 17, 0.06), 0 10px 24px -10px rgba(33, 21, 17, 0.25);
  --shadow-raised: 0 2px 0 rgba(33, 21, 17, 0.08), 0 18px 40px -16px rgba(33, 21, 17, 0.35);
  --shadow-bar: 0 -6px 24px -8px rgba(33, 21, 17, 0.3);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-state: 180ms;
  --duration-settle: 280ms;
  --duration-drawer: 420ms;
  --v20-header-h: 60px;
  --v20-bottom-bar-h: 64px;
}

@media (min-width: 390px) {
  :root { --gutter: 1.25rem; }
}

@media (min-width: 430px) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
    --v20-header-h: 76px;
  }
}