:root {
  /* ── Brand colors ── */
  --c-primary:  #39394B;   /* hero / primary surface */
  --c-overlay:  #52526A;   /* nav overlay bg + wipe */
  --c-white:    #FFFFFF;
  --c-grey-mid: #8E8EA0;
  --c-grey-dim: #5C5C72;
  --c-ink:      #101015;   /* deep section bg */

  /* ── Fonts (Adobe Fonts kit tmi5qbx) ── */
  --font-logo:    'montserrat', 'Montserrat', sans-serif;          /* RORA wordmark */
  --font-display: 'ivypresto-display', 'Times New Roman', serif;   /* Ivy Presto Light Italic */
  --font-ui:      'elza', 'Helvetica Neue', Arial, sans-serif;     /* Elza Medium */

  /* ── Fluid type scale ── */
  --t-label: 9px;
  --t-body:  clamp(15px, 1.1vw, 18px);
  --t-sm:    clamp(13px, 1vw, 16px);
  --t-md:    clamp(20px, 2.4vw, 34px);
  --t-lg:    clamp(34px, 5vw, 64px);
  --t-xl:    clamp(52px, 9vw, 128px);
  --t-2xl:   clamp(64px, 13vw, 220px);

  /* ── Spacing ── */
  --pad-x: 48px;
  --nav-h: 72px;
  --section: clamp(6rem, 14vh, 14rem);

  /* ── Motion ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ── z-index ── */
  --z-cursor: 10000;
  --z-nav:    9999;
  --z-overlay:9000;
  --z-trans:  9500;
}

@media (max-width: 768px) {
  :root {
    --pad-x: 22px;
    --nav-h: 60px;
  }
}