/*
 * theme.css — River & Oak unified design foundation.
 *
 * One token system + shared primitives for the WHOLE site: the gated app
 * pages (/shop, /product, /cart, /signin) and the marketing pages. Pairs with
 * store.css (catalog grid + cart + chrome) and catalog-detail.css (product
 * detail), which now consume these tokens instead of defining their own.
 *
 * Brand: the client's own identity — muted gold accent, PT Serif for
 * headings/body, Playball script for display headings + the wordmark, carried
 * across full-bleed high-contrast bands (gold / paper / black / dark parallax)
 * with gold hairline seams and the client's pill buttons.
 *
 * Methodology (Vahndre standard, where it doesn't fight the client brand):
 * hairline borders over drop shadows, uppercase letter-spaced eyebrow labels,
 * accent for emphasis only, NO left-accent stripe cards, NO em-dashes in copy.
 * Pill buttons + high-contrast bands are the client's brand system and are an
 * intentional override of the "sharp corners / no pills" default.
 *
 * Fonts are self-hosted from ../assets/font (no external CDN).
 */

/* ============================================================
   FONTS (self-hosted, latin subset)
   ============================================================ */
@font-face {
  font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/font/fonts_gstatic_com__EJRVQgYoZZY2vCFuvAFWzr8.woff2) format("woff2");
}
@font-face {
  font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/font/fonts_gstatic_com__EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format("woff2");
}
@font-face {
  font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../assets/font/EJRTQgYoZZY2vCFuvAFT_r21cg.woff2) format("woff2");
}
@font-face {
  font-family: "PT Serif"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(../assets/font/EJRQQgYoZZY2vCFuvAFT9gaQZynfoA.woff2) format("woff2");
}
@font-face {
  font-family: "Playball"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/font/fonts_gstatic_com__TK3gWksYAxQ7jbsKcg8Eneo.woff2) format("woff2");
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* neutrals — one warm ramp */
  --ro-ink:         #14130f;   /* headings, primary text (warm near-black) */
  --ro-black:       #000000;   /* full-contrast band */
  --ro-body:        #2c2a24;   /* long-form body text */
  --ro-mut:         #5c584f;   /* supporting copy */
  --ro-faint:       #8a857b;   /* meta, captions */
  --ro-paper:       #f2f1ec;   /* off-white band / app canvas */
  --ro-white:       #ffffff;   /* cards, inputs, form surfaces */
  --ro-line:        #e4dfd4;   /* default hairline */
  --ro-line-strong: #cbc4b4;   /* stronger divider / control border */

  /* client brand gold — hsl(49,20%,56%) from the live site */
  --ro-gold:        #a59d78;   /* band + borders + selected states */
  --ro-gold-lt:     #b6ae8b;   /* lifted gold for hover on dark */
  --ro-gold-ink:    #8a7a48;   /* eyebrows + links on light (contrast-safe) */
  --ro-gold-on-dk:  #cbbf8f;   /* eyebrows + links on black/parallax */
  --ro-gold-wash:   #faf7ee;   /* faint gold tint for selected chips */

  /* status */
  --ro-ok:   #3f7d46;
  --ro-low:  #b58a1a;   /* low-stock (warm amber, sits with gold) */
  --ro-err:  #b23b34;

  /* shape */
  --ro-pill:  999px;    /* client pill buttons */
  --ro-soft:  6px;      /* cards / inputs */
  --ro-sharp: 3px;      /* small controls, tags */

  /* type */
  --ro-serif:  "PT Serif", Georgia, "Times New Roman", serif;
  --ro-script: "Playball", "PT Serif", cursive;
  --ro-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* legacy aliases (kept so existing hooks keep resolving during refactor) */
  --ro-radius: var(--ro-sharp);
  --ro-inset:  var(--ro-paper);
  --ro-accent: var(--ro-gold-ink);
}

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

body {
  margin: 0;
  background: var(--ro-paper);
  color: var(--ro-body);
  font: 16px/1.65 var(--ro-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--ro-serif);
  color: var(--ro-ink);
  letter-spacing: -.01em;
  line-height: 1.14;
}

/* accessible focus ring (gold, works on light and dark) */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ro-gold-ink);
  outline-offset: 2px;
}

/* ============================================================
   DISPLAY TYPE
   ============================================================ */
.ro-script { font-family: var(--ro-script); font-weight: 400; line-height: 1.02; letter-spacing: .01em; }

.ro-eyebrow {
  display: block; font: 700 .7rem/1 var(--ro-sans);
  text-transform: uppercase; letter-spacing: .2em; color: var(--ro-gold-ink);
  margin: 0 0 1rem;
}

.ro-lead { font-size: 1.05rem; max-width: 54ch; }
.ro-center { text-align: center; }
.ro-center .ro-lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   BANDS (full-bleed, high-contrast, gold hairline seams)
   ============================================================ */
.ro-band { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem; }
.ro-band + .ro-band { border-top: 2px solid var(--ro-gold); }
.ro-band-in { max-width: 1080px; margin: 0 auto; }

.ro-band--gold  { background: var(--ro-gold);  color: #1c1a12; }
.ro-band--paper { background: var(--ro-paper); color: var(--ro-body); }
.ro-band--black { background: var(--ro-black); color: #ece9e0; }

/* dark parallax section — the client's photography shows through a legibility
   scrim. Set --ro-parallax-img (inline) to the section photo; without it the
   subtle dark texture is the fallback. The scrim is kept light enough that the
   photo reads while white text stays legible. */
.ro-band--parallax {
  position: relative;
  color: #f4f1e8;
  background: #0a0908;
  overflow: hidden;
}
/* Full-bleed cover photo as a REAL <img> (the same approach as the live site),
   so it renders reliably on every browser including mobile. url() inside a CSS
   custom property does not paint dependably as a background, so we avoid it.
   Add <img class="ro-parallax-img" src="..." alt=""> as the first child of the
   section. */
.ro-parallax-img {
  position: absolute; left: 0; top: -20%; z-index: 0;
  width: 100%; height: 140%;
  object-fit: cover; object-position: center;
  display: block; will-change: transform;
}
/* light legibility scrim — kept subtle so the photo stands out; headline
   legibility is carried mostly by the text-shadow on .ro-band-in */
.ro-band--parallax::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,8,.22) 0%, rgba(10,9,8,.44) 100%);
  pointer-events: none;
}
.ro-band--parallax .ro-band-in {
  position: relative; z-index: 3;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
.ro-band--parallax .ro-form-card,
.ro-band--parallax .formcard { text-shadow: none; }

/* semi-transparent panel behind heavy copy over a photo, for readability —
   matches the original's hsla(black, .42) text blocks. */
.ro-textpanel {
  background: hsla(0, 0%, 0%, .42);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--ro-soft);
  max-width: 760px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ro-center .ro-textpanel { margin-left: auto; margin-right: auto; }
.ro-textpanel .ro-prose { margin-top: .6rem; }

/* faint script watermark behind parallax content (echoes the crest photos) */
.ro-watermark {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ro-watermark span {
  font: 400 clamp(9rem, 30vw, 22rem)/1 var(--ro-script);
  color: rgba(203,191,143,.05); white-space: nowrap; transform: translateY(-.06em);
}

/* band-aware eyebrow + link colors */
.ro-band--gold  .ro-eyebrow { color: #3a3520; }
.ro-band--paper .ro-eyebrow { color: var(--ro-gold-ink); }
.ro-band--black .ro-eyebrow,
.ro-band--parallax .ro-eyebrow { color: var(--ro-gold-on-dk); }

/* ============================================================
   LINKS
   ============================================================ */
.ro-ulink { color: var(--ro-gold-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ro-ulink:hover { color: var(--ro-ink); }
.ro-band--black .ro-ulink, .ro-band--parallax .ro-ulink { color: var(--ro-gold-on-dk); }
.ro-band--black .ro-ulink:hover, .ro-band--parallax .ro-ulink:hover { color: #fff; }

/* ============================================================
   BUTTONS (client pill)
   ============================================================ */
.ro-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .9rem/1 var(--ro-sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border-radius: var(--ro-pill); padding: .95rem 1.9rem;
  border: 1.5px solid var(--ro-black); background: var(--ro-black); color: #f3efe2;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ro-btn:hover { background: var(--ro-gold-ink); border-color: var(--ro-gold-ink); color: #fff; }
.ro-btn--sm { padding: .5rem 1.15rem; font-size: .8rem; }
.ro-btn--full { width: 100%; }

/* ghost variants for use on dark and light contexts */
.ro-btn--ghost-gold { background: transparent; color: var(--ro-gold-on-dk); border-color: var(--ro-gold-on-dk); }
.ro-btn--ghost-gold:hover { background: var(--ro-gold-on-dk); color: #14130f; border-color: var(--ro-gold-on-dk); }
.ro-btn--ghost-dk { background: transparent; color: var(--ro-ink); border-color: var(--ro-ink); }
.ro-btn--ghost-dk:hover { background: var(--ro-ink); color: #f3efe2; }

/* respect reduced-motion: drop the parallax fix (also avoids iOS jank) */
/* (parallax motion is desktop-only + reduced-motion-safe, handled above) */