/* T11 — brand-only recoloring, loaded AFTER styles.css.
 * Scope is intentionally limited to color / fill / background-color / border-color,
 * accent-color, text-decoration-color, ring-color and selection colors.
 * No font, spacing, opacity, shadow, border-width, geometry or animation edits.
 * Original dynamic JS and static Tailwind class names remain unchanged.
 */
:root {
  --brand-primary: #00343D;
  --brand-accent: #F9E297;
  --brand-primary-hover: #002A31;
  --brand-accent-ink: #756020;
  --surface-page: #FAF7F2;
  --surface-card: #FFFFFF;
  --text-body: #24211D;
}

/* Primary backgrounds, including the existing dark footer. */
.bg-\[\#3E5235\],
.bg-\[\#4C6541\],
.bg-\[\#1C1917\] {
  background-color: var(--brand-primary);
}
.bg-\[\#1C1917\]\/80 {
  background-color: color-mix(in srgb, var(--brand-primary) 80%, transparent);
}
/* Tailwind transparent surface utilities retain their source opacity ratios. */
.bg-\[\#3E5235\]\/5 {
  background-color: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}
.bg-\[\#3E5235\]\/10 {
  background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.hover\:bg-\[\#3E5235\]\/20:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.border-\[\#3E5235\]\/40 {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* Foreground, icon, outlined and interaction colors. */
.text-\[\#3E5235\],
.text-\[\#4C6541\],
.group-hover\:text-\[\#3E5235\]:is(:where(.group):hover *) {
  color: var(--brand-primary);
}
.border-\[\#3E5235\],
.focus\:border-\[\#3E5235\]:focus {
  border-color: var(--brand-primary);
}
.decoration-\[\#3E5235\] {
  text-decoration-color: var(--brand-primary);
}
.accent-\[\#3E5235\] {
  accent-color: var(--brand-primary);
}
.focus-visible\:ring-\[\#3E5235\]:focus-visible {
  --tw-ring-color: var(--brand-primary);
}
.hover\:bg-\[\#3E5235\]:hover {
  background-color: var(--brand-primary);
}
.hover\:bg-\[\#32432B\]:hover {
  background-color: var(--brand-primary-hover);
}
.hover\:text-\[\#2C3A27\]:hover {
  color: var(--brand-primary-hover);
}

/* Original charcoal "selected tab" surfaces become the primary brand shade.
 * Retain neutral body text on white/pale surfaces; recolor brand headings only.
 */
h1.text-\[\#1C1917\],
h2.text-\[\#1C1917\],
h3.text-\[\#1C1917\],
header a[aria-label="صفحه اصلی بارمان"] .text-\[\#1C1917\] {
  color: var(--brand-primary);
}

/* The orange source highlight is replaced by GOLD on brand-dark surfaces,
 * and by the dark, WCAG-readable gold-derived ink on pale surfaces.
 */
.text-\[\#D9652B\] {
  color: var(--brand-accent-ink);
}
footer .text-\[\#D9652B\],
.bg-\[\#00343D\] .text-\[\#D9652B\],
.bg-\[\#1C1917\] .text-\[\#D9652B\] {
  color: var(--brand-accent);
}
.fill-\[\#D9652B\] {
  fill: var(--brand-accent);
}
/* Cart notification badge uses a gold fill with DARK digits, not pale digits
 * on gold. Later stylesheet order overrides the source text-white utility.
 */
.bg-\[\#D9652B\] {
  background-color: var(--brand-accent);
  color: var(--brand-primary);
}
/* Existing selection background and text: only the colors are changed.
 * Both variants are needed for Tailwind's cross-browser selection selectors.
 */
.selection\:bg-\[\#E8DCCB\] ::selection,
.selection\:bg-\[\#E8DCCB\]::selection {
  background-color: var(--brand-accent);
}
.selection\:text-\[\#1C1917\] ::selection,
.selection\:text-\[\#1C1917\]::selection {
  color: var(--brand-primary);
}

/* Native scrollbars retain the same 8px track, radius and hover behavior.
 * Replace only the thumb colors and preserve the original pale track surface.
 */
::-webkit-scrollbar-thumb {
  background-color: var(--brand-primary);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-primary-hover);
}

/* Browser-selected elements with semantic status/error colors (amber, blue,
 * purple, emerald, rose, and #DC2626) are intentionally NOT recolored.
 * Product images, the user-supplied logo and pale food backdrops stay intact.
 */