/*
 * `varagh` — the bookshop demo's theme (ورق). Fetched, not compiled.
 *
 * Subject and visitor: a bookshop selling e-books and audiobooks, often the
 * same title in both; a reader in Iran looking for the next book, who browses
 * the way they would along the shelves of a shop on Enghelab Street.
 * Tone: literary and quiet — an old bookshop, not an app store.
 * The detail only this subject has: the book itself. The header is set like a
 * title page (the name in the middle, the shelves between two rules), the
 * footer is a colophon on bookcloth, and every cover stands on a shelf line
 * with the shadow of its spine.
 *
 * Aged paper and brown ink; bottle-green bookcloth for every link and button;
 * gilt for the rules and ornaments only. Yekan Bakh for display, IRANSansX for
 * the body; an English page sets its headings in the system's book serif.
 * Square-ish corners, hairlines rather than shadows. Never letter-spaced.
 *
 * Plain CSS, copied to `public/themes/varagh.css` by
 * `scripts/build/sync-theme-assets.mjs`; it selects only the hooks the
 * builder and the storefront publish (`sb-*`, `data-sb-*`, `bs-*`, `ui-*`).
 */

@font-face {
  font-family: 'YekanBakhVaragh';
  src: url('/fonts/yekanbakh/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YekanBakhVaragh';
  src: url('/fonts/yekanbakh/woff2/YekanBakhFaNum-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root.theme-varagh {
  --background: #f4ede0;
  --foreground: #2b2118;
  --card: #fbf7ef;
  --card-foreground: #2b2118;
  --popover: #fbf7ef;
  --popover-foreground: #2b2118;
  --primary: #2d5a46;
  --primary-foreground: #fbf7ef;
  --secondary: #ebe2d0;
  --secondary-foreground: #2b2118;
  --muted: #ebe2d0;
  --muted-foreground: #6b5d4c;
  --accent: #e3ebe2;
  --accent-foreground: #2d5a46;
  --destructive: #a63a26;
  --destructive-foreground: #fbf7ef;
  --border: #ddd0b8;
  --input: #cfc0a4;
  --ring: #2d5a46;

  --primary-50: #eef4ef;
  --primary-100: #dce9df;
  --primary-200: #b8d2c0;
  --primary-300: #8db59a;
  --primary-400: #5f9474;
  --primary-500: #3f765a;
  --primary-600: #2d5a46;
  --primary-700: #244a3a;
  --primary-800: #1d3b2f;
  --primary-900: #172f26;
  --primary-950: #0d1c16;

  --brand-accent: var(--brand-secondary, #b0802f);
  --brand-accent-foreground: var(--brand-secondary-foreground, #2b2118);
  --chrome-ink: var(--brand-primary, #2d5a46);
  --chrome-ink-foreground: var(--brand-primary-foreground, #fbf7ef);

  --surface-page: #f4ede0;
  --surface-alt: #ebe2d0;
  --surface-input: #fbf7ef;
  --surface-panel: #ebe2d0;
  --ink-secondary: #4a3d30;

  --radius-step-sm: 2px;
  --radius-step-md: 3px;
  --radius-step-lg: 4px;
  --radius-step-xl: 6px;

  --varagh-display: 'YekanBakhVaragh', var(--app-font-display), 'IRANSansX', sans-serif;
  --varagh-book: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --varagh-gilt: var(--brand-secondary, #b0802f);
  --varagh-shelf: #8a6a48;
  --varagh-spine: rgb(43 33 24 / 0.28);
  --varagh-cloth-ink: var(--brand-primary-foreground, #f1e7d2);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light).theme-varagh {
    --background: #17130f;
    --foreground: #ede3d0;
    --card: #211b15;
    --card-foreground: #ede3d0;
    --popover: #211b15;
    --popover-foreground: #ede3d0;
    --primary: #86c0a2;
    --primary-foreground: #0f1c15;
    --secondary: #1d1813;
    --secondary-foreground: #ede3d0;
    --muted: #1d1813;
    --muted-foreground: #b1a48f;
    --accent: #1d2b23;
    --accent-foreground: #a9d6bd;
    --border: #3a3027;
    --input: #4a3f33;
    --ring: #86c0a2;
    --brand-accent: oklch(from var(--brand-secondary, #b0802f) calc(l + 0.12) calc(c * 0.9) h);
    --brand-accent-foreground: var(--brand-secondary-foreground, #17130f);
    --chrome-ink: oklch(from var(--brand-primary, #2d5a46) calc(l - 0.12) calc(c * 0.8) h);
    --chrome-ink-foreground: var(--brand-primary-foreground, #ede3d0);
    --surface-page: #17130f;
    --surface-alt: #1d1813;
    --surface-input: #211b15;
    --surface-panel: #1d1813;
    --ink-secondary: #d6cab5;
    --primary-50: #0f1c15;
    --primary-100: #15271e;
    --primary-200: #1f3a2d;
    --primary-300: #2e5642;
    --primary-400: #4a7d62;
    --primary-500: #66a084;
    --primary-600: #86c0a2;
    --primary-700: #a3d2b9;
    --primary-800: #c1e2cf;
    --primary-900: #dff0e6;
    --primary-950: #eff8f2;
    --varagh-gilt: oklch(from var(--brand-secondary, #b0802f) calc(l + 0.12) calc(c * 0.9) h);
    --varagh-shelf: #5c4733;
    --varagh-spine: rgb(0 0 0 / 0.5);
    --varagh-cloth-ink: var(--brand-primary-foreground, #ede3d0);
  }
}

/* Same palette as the media query above — change both. */
:root.dark.theme-varagh {
  --background: #17130f;
  --foreground: #ede3d0;
  --card: #211b15;
  --card-foreground: #ede3d0;
  --popover: #211b15;
  --popover-foreground: #ede3d0;
  --primary: #86c0a2;
  --primary-foreground: #0f1c15;
  --secondary: #1d1813;
  --secondary-foreground: #ede3d0;
  --muted: #1d1813;
  --muted-foreground: #b1a48f;
  --accent: #1d2b23;
  --accent-foreground: #a9d6bd;
  --border: #3a3027;
  --input: #4a3f33;
  --ring: #86c0a2;
  --brand-accent: oklch(from var(--brand-secondary, #b0802f) calc(l + 0.12) calc(c * 0.9) h);
  --brand-accent-foreground: var(--brand-secondary-foreground, #17130f);
  --chrome-ink: oklch(from var(--brand-primary, #2d5a46) calc(l - 0.12) calc(c * 0.8) h);
  --chrome-ink-foreground: var(--brand-primary-foreground, #ede3d0);
  --surface-page: #17130f;
  --surface-alt: #1d1813;
  --surface-input: #211b15;
  --surface-panel: #1d1813;
  --ink-secondary: #d6cab5;
  --primary-50: #0f1c15;
  --primary-100: #15271e;
  --primary-200: #1f3a2d;
  --primary-300: #2e5642;
  --primary-400: #4a7d62;
  --primary-500: #66a084;
  --primary-600: #86c0a2;
  --primary-700: #a3d2b9;
  --primary-800: #c1e2cf;
  --primary-900: #dff0e6;
  --primary-950: #eff8f2;
  --varagh-gilt: oklch(from var(--brand-secondary, #b0802f) calc(l + 0.12) calc(c * 0.9) h);
  --varagh-shelf: #5c4733;
  --varagh-spine: rgb(0 0 0 / 0.5);
  --varagh-cloth-ink: var(--brand-primary-foreground, #ede3d0);
}

/* ── Type: Yekan Bakh for display; a book serif on an English page ───────── */

.theme-varagh :is(h1, h2, h3, .sb-cta-title, .sb-chrome-logo > span, .sb-showcase-hero-title) {
  font-family: var(--varagh-display);
  color: var(--foreground);
}

:root[lang='en'].theme-varagh :is(h1, h2, h3, .sb-cta-title, .sb-chrome-logo > span, .sb-showcase-hero-title) {
  font-family: var(--varagh-book);
  font-weight: 600;
}

.theme-varagh :is(h1, h2, .sb-cta-title) {
  font-weight: 900;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* A section heading closes on a short gilt rule, as a chapter title does. */
.theme-varagh .sb-section h2.sb-heading::after {
  content: '';
  display: block;
  width: 3rem;
  height: 0;
  margin-block-start: 0.6rem;
  border-top: 3px double var(--varagh-gilt);
}

.theme-varagh .sb-section .sb-heading[data-sb-align='center']::after {
  margin-inline: auto;
}

/* The storefront paints its hero line in a gradient; a bookshop prints it. */
.theme-varagh .bs-gradient-text,
.theme-varagh .bs-primary-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--primary);
}

.theme-varagh :is(.bs-blob-primary, .bs-blob-accent) {
  display: none;
}

.theme-varagh .bs-pulse-dot {
  background: var(--varagh-gilt);
  animation: none;
  box-shadow: none;
}

/* ── The header: a title page ────────────────────────────────────────────── */

.theme-varagh .sb-chrome-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--background);
  border-bottom: 3px double var(--varagh-gilt);
}

.theme-varagh .sb-chrome-header .sb-section-inner {
  align-items: center;
}

.theme-varagh .sb-chrome-header .sb-column {
  align-self: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.theme-varagh .sb-chrome-header .sb-section:first-child .sb-column:nth-child(2) {
  justify-content: center;
}

.theme-varagh .sb-chrome-header .sb-section:first-child .sb-column:last-child {
  justify-content: flex-end;
}

.theme-varagh .sb-chrome-logo > span {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.theme-varagh .sb-chrome-logo:not(:has(img))::before {
  content: none;
}

/* The shelves: one centred row between a hairline and the gilt rule. */
.theme-varagh .sb-chrome-header .sb-section:nth-child(2) {
  border-top: 1px solid var(--border);
}

.theme-varagh .sb-chrome-header .sb-section:nth-child(2) .sb-column {
  justify-content: center;
}

.theme-varagh .sb-chrome-header nav.sb-chrome-menu > ul {
  flex-wrap: nowrap;
}

.theme-varagh .sb-chrome-header .sb-chrome-menu-link {
  border-radius: 0;
  padding: 0.7rem 1rem;
  color: var(--ink-secondary);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 150ms, box-shadow 150ms;
}

.theme-varagh .sb-chrome-header .sb-chrome-menu-link:hover,
.theme-varagh .sb-chrome-header .sb-chrome-menu-link:focus-visible,
.theme-varagh .sb-chrome-header .sb-chrome-menu-link[aria-current='page'] {
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--varagh-gilt);
}

.theme-varagh .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-cart, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale) {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-step-md);
  color: var(--ink-secondary);
  transition: color 150ms, background-color 150ms;
}

.theme-varagh .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-cart, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale):hover {
  background: var(--secondary);
  color: var(--primary);
}

.theme-varagh .sb-chrome-cart-count {
  background: var(--primary);
  color: var(--primary-foreground);
}

.theme-varagh .sb-chrome-mega-panel {
  border-radius: var(--radius-step-md);
  border: 1px solid var(--border);
  border-top: 3px double var(--varagh-gilt);
  background: var(--card);
  box-shadow: 0 12px 28px -18px var(--varagh-spine);
}

.theme-varagh .sb-chrome-mega-link:hover {
  color: var(--primary);
}

@media (max-width: 47.99rem) {
  .theme-varagh .sb-chrome-header .sb-section:nth-child(2) {
    display: none;
  }

  .theme-varagh .sb-chrome-logo > span {
    font-size: 1.5rem;
  }
}

/* ── Buttons: bookcloth with a pressed edge ──────────────────────────────── */

.theme-varagh .sb-button {
  border-radius: var(--radius-step-md);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms, transform 120ms;
}

.theme-varagh .sb-button:active {
  transform: translateY(1px);
}

.theme-varagh .sb-button[data-sb-variant='outline'] {
  border-color: var(--foreground);
  color: var(--foreground);
}

.theme-varagh .sb-button[data-sb-variant='outline']:hover {
  background: var(--foreground);
  color: var(--background);
}

.theme-varagh :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ── Cards: paper on paper, and every cover on a shelf ───────────────────── */

.theme-varagh .ui-glow-card,
.theme-varagh .bs-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-step-lg);
  box-shadow: none;
  transition: border-color 150ms, transform 160ms;
}

.theme-varagh a.ui-glow-card:hover,
.theme-varagh .ui-glow-card:has(a:hover) {
  border-color: var(--primary);
  box-shadow: none;
}

.theme-varagh a.ui-glow-card:hover {
  transform: translateY(-2px);
}

/* The cover: square corners and the shadow of its spine along the start. */
.theme-varagh .ui-glow-card img.ui-image {
  border-radius: 1px;
  box-shadow:
    inset 6px 0 6px -4px var(--varagh-spine),
    0 6px 10px -8px var(--varagh-spine);
}

/* A rail of books stands on a shelf: a wooden line under the row. */
.theme-varagh :is(.sb-products, .bs-public-container .grid:has(> a.ui-glow-card img.ui-image)) {
  padding-bottom: 0.9rem;
  border-bottom: 6px solid var(--varagh-shelf);
  box-shadow: 0 6px 0 -3px var(--border);
}

.theme-varagh .bs-door-chip {
  border-radius: var(--radius-step-sm);
  border-color: var(--border);
}

.theme-varagh .bs-door-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.theme-varagh .bs-faq {
  border-radius: var(--radius-step-md);
}

.theme-varagh .bs-faq[open] {
  border-color: var(--varagh-gilt);
}

.theme-varagh :is(.sb-testimonial, .sb-icon-box) {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-step-lg);
}

.theme-varagh .sb-quote {
  font-family: var(--varagh-display);
  border-inline-start: 3px double var(--varagh-gilt);
  padding-inline-start: 1.25rem;
}

.theme-varagh .sb-section[data-sb-background='muted'] {
  background: var(--secondary);
}

.theme-varagh .sb-cta {
  border-radius: var(--radius-step-lg);
  outline: 1px solid var(--varagh-gilt);
  outline-offset: -8px;
}

/* ── The footer: a colophon on bookcloth ─────────────────────────────────── */

.theme-varagh .sb-chrome-footer {
  margin-block-start: 0;
  background: var(--chrome-ink);
  color: var(--varagh-cloth-ink);
  border-top: 3px double var(--varagh-gilt);
}

.theme-varagh .sb-chrome-footer :is(p, span, a, li, .sb-chrome-logo > span) {
  color: inherit;
}

.theme-varagh .sb-chrome-footer a {
  opacity: 0.86;
  transition: opacity 150ms;
}

.theme-varagh .sb-chrome-footer a:hover,
.theme-varagh .sb-chrome-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--varagh-gilt);
  text-underline-offset: 4px;
}

.theme-varagh .sb-chrome-footer .sb-chrome-logo > span {
  font-size: 1.75rem;
}

.theme-varagh .sb-chrome-footer .sb-chrome-tagline {
  max-width: 34ch;
  opacity: 0.8;
}

.theme-varagh .sb-chrome-copyright {
  border-top: 1px solid color-mix(in oklab, var(--varagh-gilt) 55%, transparent);
  padding-top: 1rem;
  opacity: 0.75;
  text-align: center;
}

.theme-varagh .sb-chrome-footer .sb-trust img {
  background: var(--card);
  border-radius: var(--radius-step-md);
}

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