/* =============================================================================
   VORA design tokens. The four brand colours are measured from their own symbol (brief/their-assets/vora-symbol.svg):
   coral #FF6B4A, sun #FFC542, leaf #22C55E, violet #8B5CF6. They are FILLS and SHAPES only (the mark, status dots, chip
   tints, the clock ring): text is always ink on light, or white on ink and on a photo veil. The one action colour is the
   sun pill with ink text. Nothing in base.css or a sec-*.css file hard-codes a colour, a radius, a font or a gap.
   Fonts stay EB Garamond (display), Figtree (body), Inter (kept for the wordmark role), per the fork rule.
   ========================================================================== */
:root {
  /* --- colour ------------------------------------------------------------------ */
  --ground:      #F5F2EC;                 /* page: warm paper */
  --card:        #FFFFFF;                 /* cards, the header pill */
  --ink:         #17181A;                 /* text, dark surfaces */
  --ink-70:      rgba(23, 24, 26, .72);   /* secondary text: 6.2:1 on --ground */
  --ink-50:      rgba(23, 24, 26, .5);    /* non-text lines and icons only */
  --ink-30:      rgba(23, 24, 26, .3);
  --ink-10:      rgba(23, 24, 26, .1);
  --edge:        rgba(23, 24, 26, .12);   /* hairlines on paper and white */
  --paper-2:     #ECE7DD;                 /* a step darker than the page: wells, hovers */
  --coral:       #FF6B4A;
  --sun:         #FFC542;
  --leaf:        #22C55E;
  --violet:      #8B5CF6;
  --coral-14:    rgba(255, 107, 74, .14);
  --sun-14:      rgba(255, 197, 66, .22);
  --leaf-14:     rgba(34, 197, 94, .14);
  --violet-14:   rgba(139, 92, 246, .14);
  --white-72:    rgba(255, 255, 255, .72);   /* secondary text on ink and on a photo veil */
  --white-18:    rgba(255, 255, 255, .18);
  --white-10:    rgba(255, 255, 255, .1);
  --veil:        rgba(23, 24, 26, .78);
  --err:         #B3261E;
  /* names the shared base rules read */
  --cta:         var(--sun);
  --cta-ink:     var(--ink);
  --cta-deep:    #F2B02A;                 /* hover sweep of the sun pill, ink label 9.6:1 */
  --link:        var(--ink);
  --anchor:      var(--ink);
  --nav-active:  var(--paper-2);
  --ink-soft:    var(--white-72);
  --ground-10:   var(--white-10);
  --ground-18:   var(--white-18);

  /* --- type ----------------------------------------------------------------------- */
  --display:  "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body:     "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wordmark: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-h1:    clamp(46px, calc(46px + (100vw - 390px) * .036190), 84px);
  --fs-h2:    clamp(38px, calc(38px + (100vw - 390px) * .021905), 61px);
  --fs-h2big: clamp(42px, calc(42px + (100vw - 390px) * .027619), 71px);
  --fs-h3:    clamp(30px, calc(30px + (100vw - 390px) * .014286), 45px);
  --fs-close: clamp(52px, calc(52px + (100vw - 390px) * .054286), 109px);
  --lh-display: .98;
  --lh-close:   .9;

  /* --- radius --------------------------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-nav: 999px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --r-section: 32px;
  --r-corner: 48px;
  --r-pill: 1600px;
  --r-card: var(--r-md);

  /* --- shadow ----------------------------------------------------------------------------- */
  --shadow-chip:  rgba(23, 24, 26, .1) 0 1px 3px 0;
  --shadow-float: rgba(23, 24, 26, .28) 0 2px 6px 0;
  --shadow-card:  0 10px 34px rgba(23, 24, 26, .16), 0 2px 6px rgba(23, 24, 26, .08);

  /* --- frame ------------------------------------------------------------------------------ */
  --content:  1240px;
  --gutter-x: clamp(20px, calc(20px + (100vw - 390px) * .07619), 100px);
  --gap:      24px;
  --gap-s:    8px;  --gap-m: 16px;  --gap-l: 32px;  --gap-xl: 48px;  --gap-xxl: 64px;
  --band-pad: clamp(64px, calc(64px + (100vw - 390px) * .034286), 100px);
  --demo-top: 112px;

  /* compatibility names the shared css reads */
  --tint: var(--paper-2);  --line: var(--ink-50);  --line-soft: var(--ink-10);
  --ink-quiet: var(--ink-70);  --ink-invert: var(--ground);  --glass: var(--ground);  --gutter: 12px;
  --bubble: var(--card);  --ink-70-solid: #4D4E50;

  /* --- motion ------------------------------------------------------------------------------- */
  --ease-rise: cubic-bezier(.16, .84, .44, 1);
  --dur-rise:  .6s;  --stagger: .08s;  --rise-y: 22px;
  --ease-hide: cubic-bezier(.45, 0, .55, 1);
  --dur-hover:  .3s;
  --dur-sweep:  .28s;
  --dur-draw:   .24s;
  --ease-draw:  cubic-bezier(.4, 0, .2, 1);
  --uline:      var(--ink);

  /* --- the ONE nav breakpoint shared by CSS and JS ------------------------------------------------ */
  --bp-nav: 991px;
}