/*
 * The `tat` template's sheet — fetched, not compiled.
 *
 * ## What it is
 *
 * A palette, and nothing else. It exists because of a migration: a customer's
 * WooCommerce shop was imported page for page, and everything ARRIVED — the
 * catalogue, the layouts, the pictures — while the site looked like the
 * platform rather than like theirs. The content survived the move and the
 * identity did not, and identity is most of what a shopkeeper recognises.
 *
 * So this is an approximation of one WooDMart shop, read off the shop itself
 * rather than guessed. Its own CSS variables gave the two colours:
 *
 *     --wd-primary-color      rgb(13,103,178)   the blue of every link and heading rule
 *     --wd-alternative-color  rgb(255,203,6)    the yellow of every button
 *
 * A blue that carries the chrome and a yellow that carries the CALL is an
 * unusual pairing for this platform — `default` has one green doing both — and
 * getting it wrong in the obvious direction (yellow as `--primary`) would put
 * pale yellow text on white on every link the site has. So the mapping is by
 * ROLE, not by prominence: blue is `--primary`, and the yellow is
 * `--brand-accent`, which is the token this platform already means «the colour
 * that shouts» by.
 *
 * ## Why it is a palette and not a shell
 *
 * A template is a palette and a stylesheet: the site's frame is its own
 * documents (the unlisted `tat` frame variants reproduce this design's header
 * and footer), and every page of the imported site is drawn by the app in
 * these colours.
 *
 * The alternative — a `tat` header and a `tat` footer, hand-built to match the
 * screenshots — is what «rebuilding the theme» usually means, and it is the
 * wrong trade here. It would be two more components to maintain per template,
 * for a shop whose header IS a logo, a menu and a basket, which the app's
 * header already is. What the customer would actually notice missing is the
 * COLOUR, and that is this file.
 *
 * ## It is plain CSS, and has to stay that way
 *
 * No `@apply`, no `theme()`, no `@source`: `scripts/build/sync-theme-assets.mjs`
 * copies it byte for byte into `public/themes/` and it is served raw, so
 * anything needing Tailwind to run would arrive at the browser as text.
 *
 * The cascade is load order: the app's sheet first, this after it, so every
 * declaration here outranks the `:root`/`.theme-default` default of the same
 * name at equal specificity. `tests/cms/theme-stylesheets.test.ts` asserts it
 * rather than trusting it.
 */

.theme-tat {
  --background: #ffffff;
  --foreground: #333333;
  --card: #ffffff;
  --card-foreground: #333333;
  --popover: #ffffff;
  --popover-foreground: #333333;

  /*
   * The shop's own `--wd-primary-color`. It carries links, headings and the
   * chrome — everything that is structure rather than instruction.
   */
  --primary: #0d67b2;
  --primary-foreground: #ffffff;

  --secondary: #f3f3f3;
  --secondary-foreground: #3e3e3e;
  --muted: #f3f3f3;
  --muted-foreground: #767676;
  --accent: #eef4fa;
  --accent-foreground: #0d67b2;
  --destructive: #d92b2b;
  --destructive-foreground: #ffffff;
  --border: #e4e4e4;
  --input: #e4e4e4;
  --ring: #0d67b2;

  /* The blue, as a ramp. Every step is this hue — a scale mixed from two
     unrelated colours reads as a gradient between them rather than as one
     colour getting darker. */
  --primary-50: #eef6fd;
  --primary-100: #d6eafa;
  --primary-200: #aed4f4;
  --primary-300: #7bb8ea;
  --primary-400: #3e94d8;
  --primary-500: #1878c2;
  --primary-600: #0d67b2;
  --primary-700: #0a5290;
  --primary-800: #0a4373;
  --primary-900: #0b385e;
  --primary-950: #07243d;

  /*
   * The yellow, and the one place it belongs.
   *
   * `--brand-accent` is what this platform calls the colour used for emphasis
   * ON the dark chrome — the footer band, a badge, a call to action — and that
   * is exactly the job `--wd-alternative-color` does on the source: every
   * «افزودن به سبد خرید» is this yellow with near-black text on it.
   *
   * The foreground is `#242424` and not white, and it is not a preference.
   * White on #ffcb06 is a contrast ratio of about 1.7:1, which fails every
   * threshold there is; the near-black is 12:1. A yellow button with white
   * text is the single most common way this pairing gets broken.
   */
  --brand-accent: var(--brand-secondary, #ffcb06);
  --brand-accent-foreground: var(--brand-secondary-foreground, #242424);

  /* The footer band. The source's is near-black with white at 80%, which is
     `--chrome-ink` and its foreground here. */
  --chrome-ink: #242424;
  --chrome-ink-foreground: #f2f2f2;

  --surface-page: #f7f7f7;
  --surface-alt: #f3f3f3;
  --surface-input: #f3f3f3;
  --surface-panel: #f3f3f3;
  --ink-secondary: #4d4d4d;

  /* Squarer than the platform's. An industrial supplier's shop is not a
     consumer app, and the source rounds its cards at 6px where this platform
     rounds at 10px. */
  --radius-step-sm: 3px;
  --radius-step-md: 4px;
  --radius-step-lg: 6px;
  --radius-step-xl: 8px;
}

/*
 * ── The same template, in the dark ────────────────────────────────────────
 *
 * A template scope declares a WHOLE palette in both schemes, because
 * `theme-preview` renders one on a div inside a document already wearing
 * another — a block that only inherited would show this template in the
 * previewing site's colours.
 *
 * Declared twice, media query and class, for the reason the contract's pair
 * gives: `:root:not(.light)` is what a visitor with no JavaScript gets and what
 * everybody gets in the frame before hydration, and `.dark` is what somebody
 * who chose dark gets afterwards.
 *
 * The blue lifts and the yellow does not. On a dark ground #ffcb06 is already
 * bright enough to be the loudest thing on the page, and lifting it further
 * would make the accent glow; the blue at #0d67b2 is too dark to read as a link
 * against #17181a, so it takes the 400 step.
 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .theme-tat {
    --background: #17181a;
    --foreground: #f2f2f2;
    --card: #1f2124;
    --card-foreground: #f2f2f2;
    --popover: #1f2124;
    --popover-foreground: #f2f2f2;
    --primary: #3e94d8;
    --primary-foreground: #07243d;
    --secondary: #26282c;
    --secondary-foreground: #f2f2f2;
    --muted: #26282c;
    --muted-foreground: #a5a5a5;
    --accent: #26282c;
    --accent-foreground: #7bb8ea;
    --border: #303338;
    --input: #303338;
    --ring: #3e94d8;
    --chrome-ink: #101113;
    --chrome-ink-foreground: #f2f2f2;
    --surface-page: #101113;
    --surface-alt: #1f2124;
    --surface-input: #26282c;
    --surface-panel: #1f2124;
    --ink-secondary: #c9c9c9;
  }
}

.dark .theme-tat {
  --background: #17181a;
  --foreground: #f2f2f2;
  --card: #1f2124;
  --card-foreground: #f2f2f2;
  --popover: #1f2124;
  --popover-foreground: #f2f2f2;
  --primary: #3e94d8;
  --primary-foreground: #07243d;
  --secondary: #26282c;
  --secondary-foreground: #f2f2f2;
  --muted: #26282c;
  --muted-foreground: #a5a5a5;
  --accent: #26282c;
  --accent-foreground: #7bb8ea;
  --border: #303338;
  --input: #303338;
  --ring: #3e94d8;
  --chrome-ink: #101113;
  --chrome-ink-foreground: #f2f2f2;
  --surface-page: #101113;
  --surface-alt: #1f2124;
  --surface-input: #26282c;
  --surface-panel: #1f2124;
  --ink-secondary: #c9c9c9;
}

/*
 * ── The one structural rule ───────────────────────────────────────────────
 *
 * Buttons that mean «buy» take the yellow. Everything else in this file is a
 * token; this is a rule, and it earns the exception because the platform has no
 * token for it: `--primary` is what a primary button paints itself with, and on
 * this shop the primary ACTION and the primary COLOUR are deliberately
 * different things. Without this the site would be correct, blue, and not
 * recognisably theirs.
 *
 * Scoped to the storefront's own buy affordances rather than to every
 * `--primary` button, so the panel, the forms and the pagination stay blue.
 */
.theme-tat .sb-buy,
.theme-tat [data-sb-cta='buy'] {
  background-color: var(--brand-accent);
  color: var(--brand-accent-foreground);
}

/*
 * ── Galleries hold logos here ─────────────────────────────────────────────
 *
 * The platform's gallery crops each picture to fill a square cell
 * (`object-fit: cover`), which is right for photographs and wrong for the
 * thing a supplier's site actually puts in a strip: makers' marks. A wide
 * transparent logo cropped to a square is a zoomed fragment of itself
 * surrounded by nothing, and seventeen of them read as an empty section — which
 * is exactly how this template's own source site's brand strip arrived.
 *
 * `contain` costs a photo gallery some letterboxing and costs a logo strip
 * nothing, and this is a shop whose galleries are overwhelmingly the second
 * kind. Scoped to this template, because the trade is this template's to make.
 */
.theme-tat .sb-gallery img {
  object-fit: contain;
  background-color: var(--card);
}

/*
 * ── The frame's blocks, in tat's dress ────────────────────────────────────
 *
 * The frame is the site's own documents (specs/site-frame), laid out by the
 * `tat` variants and dressed here. The values are the header this template
 * drew before its frame became documents: a white bar over a hairline, round
 * 40px icon controls that fill softly on hover, the account a pill with its
 * word, the search a boxed field ending in a blue button, and the menu a row
 * of its own whose links underline in blue.
 */

.theme-tat .sb-chrome-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--background);
}

/*
 * The contact bar: the header's first band, on the brand's blue. Thin, in
 * small type, its links and icons in the band's own ink rather than the
 * muted grey the rest of the header uses.
 */
.theme-tat .sb-chrome-header .sb-section[data-sb-background='color'] {
  font-size: 12px;
}

.theme-tat .sb-chrome-header .sb-section[data-sb-background='color'] .sb-section-inner {
  min-height: 2.25rem;
  padding-block: 0.25rem;
}

.theme-tat .sb-chrome-header .sb-section[data-sb-background='color'] :is(a, span, svg) {
  color: inherit;
}

.theme-tat .sb-chrome-header .sb-section[data-sb-background='color'] .sb-column:last-child {
  align-items: flex-end;
}

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

.theme-tat .sb-chrome-header .sb-column {
  align-self: center;
  gap: 0.25rem;
}

.theme-tat .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, .sb-chrome-menu > button) {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: var(--muted-foreground);
  transition: background-color 150ms, color 150ms;
}

.theme-tat .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, .sb-chrome-menu > button):hover {
  background-color: var(--muted);
  color: var(--foreground);
}

/* The menu's trigger is a phone's control only; the box above must not bring
   it back on a wide page. */
@container sb-page (width >= 768px) {
  .theme-tat .sb-chrome-header .sb-chrome-menu > button {
    display: none;
  }
}

.theme-tat .sb-chrome-header .sb-chrome-account:has(span) {
  gap: 0.5rem;
  padding-inline: 0.75rem;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.theme-tat .sb-chrome-header .sb-chrome-account:has(span) svg {
  width: 18px;
  height: 18px;
}

.theme-tat .sb-chrome-header .sb-chrome-cart .sb-chrome-cart-count {
  top: -0.125rem;
  inset-inline-end: auto;
  inset-inline-start: -0.125rem;
  min-width: 1.25rem;
  height: 1.25rem;
  font-size: 10px;
  font-weight: 700;
}

/* The open search: a boxed field with the blue button at its end. */
.theme-tat .sb-chrome-header form.sb-chrome-search {
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-step-md);
  background-color: var(--card);
}

.theme-tat .sb-chrome-header form.sb-chrome-search input {
  padding-inline: 0.875rem;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  outline: none;
}

.theme-tat .sb-chrome-header form.sb-chrome-search button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  transition: opacity 150ms;
}

.theme-tat .sb-chrome-header form.sb-chrome-search button:hover {
  opacity: 0.9;
}

/* The menu's links: semibold, dark, and blue with a blue underline on hover.
   The row they sit on is parted from the one above by a hairline. */
.theme-tat .sb-chrome-header .sb-chrome-menu > ul {
  gap: 0.25rem;
}

.theme-tat .sb-chrome-header .sb-chrome-menu-link {
  display: flex;
  align-items: center;
  height: 3rem;
  padding-inline: 0.75rem;
  border-bottom: 2px solid transparent;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 150ms, border-color 150ms;
}

.theme-tat .sb-chrome-header .sb-chrome-menu-link:hover,
.theme-tat .sb-chrome-header li:focus-within > .sb-chrome-menu-link {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

@container sb-page (width >= 768px) {
  .theme-tat .sb-chrome-header .sb-section + .sb-section:has(.sb-chrome-menu-collapses):not(:has(.sb-chrome-logo)) {
    border-top: 1px solid var(--border);
  }
}