/* DESIGN TOKENS — re-skin the site here (brief §2.1). Values taken from the Figma file. */
:root {
  /* Colour */
  --c-bg: #0d0d0d;
  --c-text: #ffffff;
  --c-text-muted: rgba(255, 255, 255, 0.7);
  --c-accent: #ce0000;          /* prices, discount badge, submit */
  --c-input-bg: #0d0d0d;
  --c-input-border: rgba(255, 255, 255, 0.5);   /* same stroke as .divider separators */
  --c-frost: rgba(255, 255, 255, 0.62);  /* frosted nav bar */
  --c-frost-blur: 12px;

  /* Type. Elms Sans is the licensed brand face; DM Sans is the Figma fallback and
     what renders until the Elms Sans web-font is added. Swap the stack, not the markup. */
  --font-sans: "Elms Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-serif-badge: "Libre Caslon Text", Georgia, serif;

  /* Scale (px from Figma) */
  --fs-body: 16px;
  --fs-body-2: 18px;
  --fs-heading: 25px;      /* section headings, size labels */
  --fs-title: 56px;        /* product title (serif) */
  --fs-price: 50px;
  --fs-badge: 68px;

  /* Layout */
  --content-max: 1200px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius-img: 15px;
  --radius-input: 12px;
  --radius-nav: 13px;

  /* Motion — one shared easing + timing so every animation feels like one hand (the OL's manner) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --reveal-dur: 1.8s;
  --reveal-rise: 20px;
}