/* ==========================================================================
   Vasanti Collection - design tokens & base styles
   Palette sampled directly from the brand logo.
   ========================================================================== */

:root {
  /* Brand */
  --maroon:        #5D171E;
  --maroon-deep:   #431016;
  --maroon-soft:   #8A3140;
  --forest:        #2A4638;
  --forest-deep:   #1C3126;
  --gold:          #AB761E;
  --gold-light:    #C9A227;
  --terracotta:    #C7634E;

  /* Surfaces */
  --cream:         #FEF7EB;
  --cream-deep:    #F7E9D5;
  --surface:       #FFFFFF;
  --border:        #E7D8C2;
  --border-strong: #D6C0A3;

  /* Text */
  --ink:           #2A1D18;
  --ink-muted:     #6B5A50;
  --ink-faint:     #96877C;

  /* Feedback */
  --danger:        #A3242B;
  --danger-bg:     #FBEDEC;
  --success:       #2A6A4C;
  --success-bg:    #EAF5EF;

  /* Type
     Cormorant for display and Jost for text: a garalde serif against a
     geometric sans is the pairing fashion houses use, and it reads as
     considered rather than as a default UI stack. */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Shape & motion */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(42, 29, 24, 0.06);
  --shadow:    0 4px 16px rgba(42, 29, 24, 0.08);
  --shadow-lg: 0 18px 48px rgba(67, 16, 22, 0.13);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  /* Nothing in this design scrolls sideways, on any page. Declared here at
     the root rather than per stylesheet, so a page cannot be built that
     forgets to opt in.

     It has to be `hidden`, not `clip`. Overflow set on the root element is
     propagated to the viewport, and that propagation is only defined for
     scrolling values: browsers ignore `clip` here, which is why an earlier
     version of this rule had no effect at all.

     Because the value propagates, `html` itself computes back to `visible`
     and never becomes a scroll container, so `position: sticky` on the
     masthead is unaffected. That caveat applies to `body`, not to the root. */
  overflow-x: hidden;

  /* Stops the rubber-band "stretch" when you drag past the end of the page,
     in both directions. `overflow` cannot do this: the bounce is not
     overflow, it is the browser scrolling past the document's own bounds.
     This also stops scroll chaining, so reaching the end of an inner
     scrollable area no longer starts dragging the page behind it. */
  overscroll-behavior: none;

  width: 100%;

  /* The page's own scrollbar is hidden. Scrolling, wheel and keyboard
     behaviour are all unchanged; only the bar is gone. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Components that scroll inside themselves keep a visible, slim, brand-tinted
   bar. This is the default they inherit; .cb overrides it thinner still. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--maroon-soft);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* A single unbreakable token, a long email or a URL, would otherwise set
     the minimum width of its column and push the whole page wider than the
     screen. This is the commonest cause of sideways scroll on a phone. */
  overflow-wrap: break-word;

  /* Second layer, catching anything that still pokes past the body box.
     `clip` is correct here: on a non-root element it clips without becoming
     a scroll container, so sticky descendants still work. The root's
     overflow has already propagated to the viewport, so this one applies to
     the body itself rather than propagating in turn. */
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;

  /* Belt and braces with the root rule above: some engines apply the bounce
     to the body rather than the document. */
  overscroll-behavior: none;

  /* Removes double-tap-to-zoom and the 300ms tap delay that comes with it.
     Pinch-to-zoom is deliberately untouched, because taking that away would
     break the page for anyone who needs to magnify it. */
  touch-action: manipulation;
}

/* iOS Safari zooms the whole page in whenever a focused input is smaller than
   16px, and the zoomed page can then be dragged around in both directions.
   That is the other half of the "my page stretches" problem, and it is why
   this is a hard floor rather than a preference.
   `pointer: coarse` targets touch screens, so a narrow desktop window keeps
   the smaller, intended type. !important is needed only because auth.css and
   account.css load after this file and set their own sizes. */
@media (pointer: coarse) {
  /* Checkboxes and radios are drawn from width/height, not type size, and the
     OTP boxes are already 1.5rem, so none of them can trigger the zoom and
     none should be shrunk to 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not(.otp__digit),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Grid and flex children are min-width:auto by default, so they refuse to
   shrink below their own content and drag the page out with them. Anything
   laid out in a track here is allowed to shrink instead. */
.grid > *,
.fieldgrid > *,
.footer__grid > *,
.section__head > *,
.story > *,
.masthead__row > *,
.account-layout > *,
.auth > *,
.auth__row > * {
  min-width: 0;
}

/* Replaced elements are the other habitual offender. */
img, svg, video, canvas, iframe { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--maroon);
}

a {
  color: var(--maroon);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--maroon-soft); }

img { max-width: 100%; display: block; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}