/* ==========================================================================
   Ruby Make Over · Design + Motion tokens
   Source: docs/DESIGN-SYSTEM.md §13 and docs/MOTION-SYSTEM.md §2
   ========================================================================== */
:root {
  /* Colour */
  --primary: #4E1C1F;
  --secondary: #FFF6EF;
  --text-color: #7A7A7A;
  --accent-color: #FFFFFF;
  --accent-color-2: #E7D3C5;
  --accent-color-3: #02010100;
  --accent-color-4: #000000;
  --accent-color-5: rgba(0,0,0,.45);
  --accent-color-6: #F1F1F1;

  /* Type */
  --font-family-heading: "Marcellus", Georgia, serif;
  --font-family-text: "Catamaran", system-ui, sans-serif;
  --font-family-highlight: "Playfair Display", Georgia, serif;

  /* Layout */
  --container-max: 1340px;
  --section-pad-y: 8em;
  --section-pad-x: 1em;
  --frame-offset: -28px;
  --header-h: 88px;

  /* Motion: duration */
  --dur-instant: 150ms;
  --dur-fast: 300ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;
  --dur-slower: 1200ms;

  /* Motion: easing */
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-curtain: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);

  /* Motion: distance */
  --rise: 40px;
  --lift: -8px;
  --stagger-text: 80ms;
  --stagger-group: 120ms;
  --stagger-grid: 90ms;
}

@media (max-width: 991.98px) {
  :root { --section-pad-y: 6em; }
}
@media (max-width: 767.98px) {
  :root { --section-pad-y: 4.5em; --rise: 24px; --lift: -4px; --header-h: 72px; }
}