/* rvluxurybeds design tokens
   Source of truth: rvluxurybeds brand guide v1.0 (Sept 2026).
   Change brand values here only. */

:root {
  /* Palette (brand guide, section 04) */
  --charcoal: #282A29;
  --ivory: #F7F4ED;
  --oat: #D7CBB8;
  --forest: #34473F;
  --bronze: #977348; /* decorative only: fails 4.5:1 for body text on ivory (3.93:1) */

  /* Tints built from the palette for surfaces and hairlines, never for text */
  --ivory-deep: #EFE9DD;
  --oat-soft: #E6DDCE;
  --forest-deep: #2B3B34;
  --line: rgba(40, 42, 41, .16);
  --line-strong: rgba(40, 42, 41, .32);
  --line-on-forest: rgba(247, 244, 237, .22);

  /* Semantic roles */
  --bg: var(--ivory);
  --text: var(--charcoal);
  --action-bg: var(--forest);
  --action-text: var(--ivory);
  --focus: var(--forest);
  --focus-on-dark: var(--ivory);
  --error: #8A2F22; /* 7.1:1 on ivory; used only for validation messages */

  /* Typography (brand guide, section 05) */
  --font-display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* Headline 40-56px / 110%, body 16-18px / 150%, label 12-14px / 140% */
  --fs-display: clamp(2.5rem, 1.9rem + 1.9vw, 3.5rem);
  --fs-h2: clamp(2.125rem, 1.7rem + 1.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .35vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-label: clamp(.75rem, .72rem + .1vw, .8125rem);
  --lh-display: 1.1;
  --lh-body: 1.5;
  --lh-label: 1.4;
  --tracking-label: .14em;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 3rem);
  --measure: 36rem;
  --page-max: 88rem;

  /* Hero panel: translucent over the footage. Verified for contrast:
     charcoal text stays above 8:1 even where the footage is black. */
  --panel-tint: 60%;
  --panel-blur: 14px;

  /* Header: dark and translucent over the hero media.
     Verified for contrast: ivory nav text stays above 7:1 over the brightest footage. */
  /* The bar is a gradient: denser behind the links, almost gone at the curved
     edge, so it reads far lighter without dropping the text below AA. */
  --header-tint: 62%;        /* behind the nav text */
  --header-tint-edge: 16%;   /* at the curved bottom edge */
  --header-tint-scrolled: 80%;
  --header-blur: 12px;
  --sill-tint: 88%;   /* the control bar over the footage */
  /* The bar's bottom edge follows the roofline curve; this is the depth it curves through */
  --header-curve: 64px;

  /* Shape: fine rules, gentle radii (brand guide, section 07) */
  --radius-s: 2px;
  --radius-m: 4px;
  --hairline: 1px;

  /* Logo (brand guide, section 03): clear space = 10% of visible width */
  --logo-w: 220px; /* digital minimum visible width */
  --logo-clear: calc(var(--logo-w) * .1);

  /* Motion vocabulary */
  --dur-control: 180ms;
  --dur-section: 600ms;
  --dur-atmosphere: 1400ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --reveal-distance: 18px;

  /* Layout chrome */
  --header-h: calc(86px + var(--logo-clear) * 2);
  --mobile-bar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 47.99rem) {
  :root {
    --reveal-distance: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-control: 1ms;
    --dur-section: 1ms;
    --dur-atmosphere: 1ms;
    --reveal-distance: 0px;
  }
}