/* Brand layer: classic, refined light blue and white.
   Linked from rs_head() right after store.css and BEFORE the account palette
   (rs_brand_css), so a palette set in the store account still wins for accents.
   Light is the default theme. Rules that clash with rails.js (injected at runtime,
   after this file) carry extra specificity instead of relying on order. */

:root{
  --accent:#2f78b7;
  --accent-hover:#5aa0d6;
  --accent-deep:#1f5d93;
  --accent-tint:#e6f1fa;
  --accent-ink:var(--accent);
  --bar-bg:rgba(255,255,255,.88);
  --sheet-bg:#f8fbfe;
  --ink:#0f2438;
  --ink-soft:rgba(15,36,56,.8);
  --ink-big:#1b3550;
  --ink-dim:#5d7287;
  --curtain:rgba(214,230,244,.5);
  --hairline:#d6e4f1;
  --frame:#d6e4f1;
  --focus:rgba(47,120,183,.65);
  --sky:#eef5fb;
  --sky-2:#e1edf8;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
}

/* Dark theme (opt-in via the toggle): swap the warm accents for blue ones. */
html[data-theme="dark"]{
  --d-link:#8fc4ee;--d-tag:#9cc9ee;--d-tint:#12202b;--focus:rgba(143,196,238,.7);
}

/* ---- Wordmark (shown until a logo image is set) ---- */
.gn-wordmark{display:inline-block;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.gn-link{color:var(--ink)}
.gn-bar{border-bottom:1px solid var(--hairline)}
@media(max-width:600px){.gn-wordmark{font-size:14px;letter-spacing:.16em}}

/* ---- Serif headings ---- */
.hero h1,.ct-head h1,.c2-head h1,.pd h1,.bg h1,.ct-h2,.ct-usp-item h3,
.gn-big a,.gn-bag-title,.gn-chip-title,.gn-m-list a,.gn-m-groups .big a,
html .rs-title,html .rs-side p,html .ar-head h2,html .ar-lead h3{
  font-family:var(--serif);font-weight:500;letter-spacing:-.005em;
}
.hero h1{letter-spacing:.01em}
.hero h1::before{content:"";display:block;width:44px;height:2px;background:var(--accent);margin:0 auto 26px;opacity:.7}
html .ar-head h2 b{font-weight:600}

/* ---- Small caps tags ---- */
.ct-tag,.c2-tag,.pd-tag,html .ar-tag{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}

/* ---- Buttons and chips: squared, tracked, understated ---- */
.pd-buy,.gn-bagbtn{border-radius:3px;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;font-weight:600}
.pd-buy{padding:15px 34px}
.gn-bagbtn{padding:12px 0}
.gn-chip,.ct-chip,.c2-chip,.rs-fsummary,.bg-qty,.pd-opt select,.pd-opt input,.bg-email{border-radius:4px}

/* ---- Light theme surfaces ---- */
html[data-theme="light"] .hero{background:linear-gradient(180deg,#fff 0%,#f1f7fc 55%,#e3eff9 100%)}
html[data-theme="light"] .ct-band,
html[data-theme="light"] .pd-art,
html[data-theme="light"] .rs,
html[data-theme="light"] .ar{background:var(--sky)}
html[data-theme="light"] .rs-fsummary:hover{background:var(--sky)}
html[data-theme="light"] footer.rs-foot{background:var(--sky);border-top:1px solid var(--hairline);letter-spacing:.02em}

html[data-theme="light"] .ct-card,
html[data-theme="light"] .ar-card,
html[data-theme="light"] .ar-lead{border:1px solid #dbe8f4;border-radius:6px}
html[data-theme="light"] .pd-art{border-radius:8px}

/* ---- Light theme text ---- */
html[data-theme="light"] .rs-title,
html[data-theme="light"] .rs-side p,
html[data-theme="light"] .rs-label,
html[data-theme="light"] .ar-head h2 b,
html[data-theme="light"] .ar-lead h3,
html[data-theme="light"] .ar-name,
html[data-theme="light"] .ar-price{color:var(--ink)}
html[data-theme="light"] .ar-head h2{color:var(--ink-dim)}
html[data-theme="light"] .ar-lead p,
html[data-theme="light"] .ct-usp-item p,
html[data-theme="light"] .pd-desc,
html[data-theme="light"] .pd-subnote{color:#3f566b}
html[data-theme="light"] .gn-chip,
html[data-theme="light"] .c2-chip,
html[data-theme="light"] .ct-chip{color:var(--ink)}
@media(max-width:833px){
  html[data-theme="light"] .gn-burger .l1,
  html[data-theme="light"] .gn-burger .l2{background:var(--ink)}
}

/* ---- Dark fills (black chips, selected states) become navy in light ---- */
html[data-theme="light"] .gn-chip-fill,
html[data-theme="light"] .gn-chip-fill:hover,
html[data-theme="light"] .c2-chip.on,
html[data-theme="light"] .ct-chip.on,
html[data-theme="light"] .pd-buy.is-added,
html[data-theme="light"] .rs-fbadge{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- Rails (rails.js): arrows and illustration ---- */
html .ar-btn{background:#dfeaf5}
html .ar-btn:hover{background:#cfe0f0}
html .ar-scene g:nth-of-type(1){stroke:#2f78b7}
html .ar-scene g:nth-of-type(3){stroke:#5aa0d6}
html .ar-scene circle:nth-of-type(3){fill:#e3effa}
html .ar-card.has-photo .ar-tag,
.ct-card.has-photo .ct-tag,
.c2-card.has-photo .c2-tag{color:#d6ebfc}