/* Bwoof Market design foundation, 1.12.32.
 * Tokens and opt-in primitives only: existing WoodMart/WooCommerce UI keeps its cascade.
 */
:root {
  /* Brand and semantic colors. */
  --bwoof-primary: #125791;
  --bwoof-primary-hover: #0d4777;
  --bwoof-primary-soft: #eaf3fa;
  --bwoof-on-primary: #fff;
  --bwoof-background: #f8fafc;
  --bwoof-surface: #fff;
  --bwoof-surface-elevated: #fff;
  --bwoof-glass-surface: rgb(255 255 255 / 78%);
  --bwoof-text: #172b40;
  --bwoof-text-muted: #52677b;
  --bwoof-border: #d6e1ea;
  --bwoof-success: #18734c;
  --bwoof-warning: #9a5800;
  --bwoof-error: #b42332;
  --bwoof-disabled: #8b9aa8;

  /* Rhythm: 4px base; 12px is the default control/card radius. */
  --bwoof-space-1: 4px;
  --bwoof-space-2: 8px;
  --bwoof-space-3: 12px;
  --bwoof-space-4: 16px;
  --bwoof-space-6: 24px;
  --bwoof-space-8: 32px;
  --bwoof-space-12: 48px;
  --bwoof-space-16: 64px;
  --bwoof-radius-sm: 8px;
  --bwoof-radius-md: 12px;
  --bwoof-radius-lg: 20px;
  --bwoof-radius-pill: 999px;
  --bwoof-content-max: 1320px;

  /* Persian-first typography. Existing headings are not restyled by these tokens. */
  --bwoof-font: 'Vazirmatn', system-ui, sans-serif;
  --bwoof-type-display-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --bwoof-type-display-weight: 800;
  --bwoof-type-display-line: 1.35;
  --bwoof-type-h1-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);
  --bwoof-type-h1-weight: 750;
  --bwoof-type-h1-line: 1.45;
  --bwoof-type-h2-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --bwoof-type-h2-weight: 750;
  --bwoof-type-h2-line: 1.5;
  --bwoof-type-h3-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --bwoof-type-h3-weight: 700;
  --bwoof-type-h3-line: 1.55;
  --bwoof-type-h4-size: 1.125rem;
  --bwoof-type-h4-weight: 700;
  --bwoof-type-h4-line: 1.6;
  --bwoof-type-body-lg-size: 1.125rem;
  --bwoof-type-body-lg-weight: 400;
  --bwoof-type-body-lg-line: 1.85;
  --bwoof-type-body-size: 1rem;
  --bwoof-type-body-weight: 400;
  --bwoof-type-body-line: 1.85;
  --bwoof-type-small-size: .875rem;
  --bwoof-type-small-weight: 400;
  --bwoof-type-small-line: 1.75;
  --bwoof-type-label-size: .875rem;
  --bwoof-type-label-weight: 650;
  --bwoof-type-label-line: 1.6;
  --bwoof-type-meta-size: .75rem;
  --bwoof-type-meta-weight: 500;
  --bwoof-type-meta-line: 1.65;
  --bwoof-type-price-size: 1.125rem;
  --bwoof-type-price-weight: 750;
  --bwoof-type-price-line: 1.5;
  --bwoof-type-button-size: .875rem;
  --bwoof-type-button-weight: 700;
  --bwoof-type-button-line: 1.5;

  /* Interaction and elevation. */
  --bwoof-motion-fast: 120ms;
  --bwoof-motion-normal: 200ms;
  --bwoof-motion-slow: 320ms;
  --bwoof-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --bwoof-ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --bwoof-shadow-card: 0 4px 18px rgb(18 52 82 / 6%);
  --bwoof-shadow-floating: 0 10px 28px rgb(18 52 82 / 12%);
  --bwoof-shadow-drawer: 0 18px 48px rgb(18 52 82 / 16%);
  --bwoof-shadow-dropdown: 0 12px 32px rgb(18 52 82 / 14%);
  --bwoof-shadow-modal: 0 24px 64px rgb(18 52 82 / 20%);
  --bwoof-focus-ring: 0 0 0 3px rgb(18 87 145 / 22%);
  --bwoof-overlay: rgb(23 43 64 / 42%);
  --bwoof-z-overlay: 2147483000;
  --bwoof-z-panel: 2147483001;
  --bwoof-z-progress: 2147483002;
  --bwoof-icon-sm: 16px;
  --bwoof-icon-md: 20px;
  --bwoof-icon-lg: 24px;

  /* Existing CSS-only dot canvas consumes these values; no extra image or animation. */
  --bwoof-pattern-dot-desktop: rgb(18 87 145 / 10%);
  --bwoof-pattern-dot-mobile: rgb(18 87 145 / 6%);
  --bwoof-pattern-dot-dark: rgb(116 180 235 / 16%);
  --bwoof-pattern-dot-dark-mobile: rgb(116 180 235 / 10%);
}

/* Opt-in type roles; content retains its semantic heading tags. */
.bwoof-ds-type { font-family: var(--bwoof-font); color: var(--bwoof-text); }
.bwoof-ds-type--display { font-size: var(--bwoof-type-display-size); font-weight: var(--bwoof-type-display-weight); line-height: var(--bwoof-type-display-line); }
.bwoof-ds-type--h1 { font-size: var(--bwoof-type-h1-size); font-weight: var(--bwoof-type-h1-weight); line-height: var(--bwoof-type-h1-line); }
.bwoof-ds-type--h2 { font-size: var(--bwoof-type-h2-size); font-weight: var(--bwoof-type-h2-weight); line-height: var(--bwoof-type-h2-line); }
.bwoof-ds-type--h3 { font-size: var(--bwoof-type-h3-size); font-weight: var(--bwoof-type-h3-weight); line-height: var(--bwoof-type-h3-line); }
.bwoof-ds-type--h4 { font-size: var(--bwoof-type-h4-size); font-weight: var(--bwoof-type-h4-weight); line-height: var(--bwoof-type-h4-line); }
.bwoof-ds-type--body-lg { font-size: var(--bwoof-type-body-lg-size); font-weight: var(--bwoof-type-body-lg-weight); line-height: var(--bwoof-type-body-lg-line); }
.bwoof-ds-type--body { font-size: var(--bwoof-type-body-size); font-weight: var(--bwoof-type-body-weight); line-height: var(--bwoof-type-body-line); }
.bwoof-ds-type--small { font-size: var(--bwoof-type-small-size); font-weight: var(--bwoof-type-small-weight); line-height: var(--bwoof-type-small-line); }
.bwoof-ds-type--label { font-size: var(--bwoof-type-label-size); font-weight: var(--bwoof-type-label-weight); line-height: var(--bwoof-type-label-line); }
.bwoof-ds-type--meta { font-size: var(--bwoof-type-meta-size); font-weight: var(--bwoof-type-meta-weight); line-height: var(--bwoof-type-meta-line); color: var(--bwoof-text-muted); }
.bwoof-ds-type--price { font-size: var(--bwoof-type-price-size); font-weight: var(--bwoof-type-price-weight); line-height: var(--bwoof-type-price-line); }
.bwoof-ds-type--button { font-size: var(--bwoof-type-button-size); font-weight: var(--bwoof-type-button-weight); line-height: var(--bwoof-type-button-line); }

/* Components are opt-in; no WooCommerce, Elementor or WoodMart selectors here. */
.bwoof-ds-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bwoof-space-2);
  box-sizing: border-box; min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--bwoof-radius-md);
  font: var(--bwoof-type-button-weight) var(--bwoof-type-button-size)/var(--bwoof-type-button-line) var(--bwoof-font);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--bwoof-motion-normal) var(--bwoof-ease-standard),
    border-color var(--bwoof-motion-normal) var(--bwoof-ease-standard),
    color var(--bwoof-motion-normal) var(--bwoof-ease-standard),
    box-shadow var(--bwoof-motion-normal) var(--bwoof-ease-standard);
}
.bwoof-ds-button--primary { background: var(--bwoof-primary); color: var(--bwoof-on-primary); }
.bwoof-ds-button--primary:hover { background: var(--bwoof-primary-hover); color: var(--bwoof-on-primary); }
.bwoof-ds-button--secondary { background: var(--bwoof-primary-soft); color: var(--bwoof-primary); }
.bwoof-ds-button--secondary:hover { background: #dcecf7; color: var(--bwoof-primary-hover); }
.bwoof-ds-button--outline { border-color: var(--bwoof-primary); background: transparent; color: var(--bwoof-primary); }
.bwoof-ds-button--outline:hover { background: var(--bwoof-primary-soft); }
.bwoof-ds-button--ghost { background: transparent; color: var(--bwoof-primary); }
.bwoof-ds-button--ghost:hover { background: var(--bwoof-primary-soft); }
.bwoof-ds-button--danger { background: var(--bwoof-error); color: #fff; }
.bwoof-ds-button--danger:hover { background: #941d2b; color: #fff; }
.bwoof-ds-button:is(:disabled, [aria-disabled='true']),
.bwoof-ds-field:disabled,
.bwoof-ds-choice:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.bwoof-ds-button[aria-busy='true'] { cursor: progress; }
.bwoof-ds-button[aria-busy='true']::after {
  content: ''; width: 1em; height: 1em; border: 2px solid currentColor;
  border-inline-end-color: transparent; border-radius: 50%; animation: bwoof-ds-spin .8s linear infinite;
}
@keyframes bwoof-ds-spin { to { transform: rotate(360deg); } }

.bwoof-ds-field {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--bwoof-border); border-radius: var(--bwoof-radius-md);
  background: var(--bwoof-surface); color: var(--bwoof-text);
  font: var(--bwoof-type-body-weight) var(--bwoof-type-body-size)/1.6 var(--bwoof-font);
  transition: border-color var(--bwoof-motion-normal) var(--bwoof-ease-standard),
    box-shadow var(--bwoof-motion-normal) var(--bwoof-ease-standard);
}
.bwoof-ds-field::placeholder { color: var(--bwoof-text-muted); opacity: 1; }
textarea.bwoof-ds-field { min-height: 112px; resize: vertical; }
select.bwoof-ds-field { padding-inline-end: 36px; cursor: pointer; }
.bwoof-ds-field:is([aria-invalid='true'], .is-error) { border-color: var(--bwoof-error); }
.bwoof-ds-field.is-success { border-color: var(--bwoof-success); }
.bwoof-ds-choice { width: 20px; height: 20px; min-width: 20px; accent-color: var(--bwoof-primary); cursor: pointer; }
.bwoof-ds-quantity { display: inline-flex; align-items: stretch; min-height: 44px; border: 1px solid var(--bwoof-border); border-radius: var(--bwoof-radius-md); overflow: hidden; }
.bwoof-ds-quantity > :is(button, input) { min-width: 44px; border: 0; background: transparent; color: var(--bwoof-text); text-align: center; }
.bwoof-ds-quantity > button { cursor: pointer; }
.bwoof-ds-quantity > button:hover { background: var(--bwoof-primary-soft); }

.bwoof-ds-surface { box-sizing: border-box; border: 1px solid var(--bwoof-border); background: var(--bwoof-surface); color: var(--bwoof-text); }
.bwoof-ds-surface--card { border-radius: var(--bwoof-radius-md); box-shadow: var(--bwoof-shadow-card); }
.bwoof-ds-surface--drawer { border-radius: var(--bwoof-radius-lg); box-shadow: var(--bwoof-shadow-drawer); }
.bwoof-ds-surface--dropdown { border-radius: var(--bwoof-radius-md); box-shadow: var(--bwoof-shadow-dropdown); }
.bwoof-ds-surface--modal { border-radius: var(--bwoof-radius-lg); box-shadow: var(--bwoof-shadow-modal); }
.bwoof-ds-surface--glass { border-radius: var(--bwoof-radius-md); background: var(--bwoof-glass-surface); box-shadow: var(--bwoof-shadow-floating); }
@supports (backdrop-filter: blur(1px)) {
  .bwoof-ds-surface--glass { backdrop-filter: blur(14px); }
}
.bwoof-ds-surface.is-active { border-color: var(--bwoof-primary); }
.bwoof-ds-surface.is-error { border-color: var(--bwoof-error); }
.bwoof-ds-surface.is-success { border-color: var(--bwoof-success); }
.bwoof-ds-surface[aria-busy='true'] { cursor: progress; }

.bwoof-ds-button:focus-visible,
.bwoof-ds-field:focus-visible,
.bwoof-ds-choice:focus-visible,
.bwoof-ds-quantity :is(button, input):focus-visible,
.bwoof-ds-surface[tabindex]:focus-visible {
  outline: 2px solid var(--bwoof-primary); outline-offset: 2px; box-shadow: var(--bwoof-focus-ring);
}

/* Shared 24px viewBox, 1.75 stroke; mirror only directional icons in RTL. */
.bwoof-ds-icon { display: inline-block; flex: none; width: var(--bwoof-icon-md); height: var(--bwoof-icon-md); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.bwoof-ds-icon--sm { width: var(--bwoof-icon-sm); height: var(--bwoof-icon-sm); }
.bwoof-ds-icon--lg { width: var(--bwoof-icon-lg); height: var(--bwoof-icon-lg); }
[dir='rtl'] .bwoof-ds-icon--directional { transform: scaleX(-1); }

@media (max-width: 767px) {
  :root { --bwoof-type-display-size: 2.25rem; --bwoof-type-body-lg-size: 1rem; }
  .bwoof-ds-button, .bwoof-ds-field, .bwoof-ds-quantity { min-height: 48px; }
  .bwoof-ds-quantity > :is(button, input) { min-width: 48px; }
  .bwoof-ds-surface--glass { background: rgb(255 255 255 / 88%); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --bwoof-motion-fast: .01ms; --bwoof-motion-normal: .01ms; --bwoof-motion-slow: .01ms; }
  .bwoof-ds-button[aria-busy='true']::after { animation: none; }
}