/*!
 * Fr_Project — Design System (Phase 01)
 * Path: woodmart-child/assets/css/design-system.css
 *
 * Sections
 *  1. Font
 *  2. Design Tokens
 *  3. WoodMart Bridge
 *  4. Base (low specificity)
 *  5. Links
 *  6. Buttons
 *  7. Form fields
 *  8. Layout utilities
 *  9. Typography & text utilities
 * 10. Commerce primitives (price, badge, skeleton, ratio)
 * 11. Responsive
 * 12. Reduced motion
 *
 * Breakpoints (aligned with WoodMart's Custom CSS tabs):
 *   Mobile            <= 576px
 *   Mobile landscape  577px – 768px
 *   Tablet            769px – 1024px
 *   Desktop           >= 1025px
 * (CSS variables can't be used inside @media, so values are repeated.)
 */

/* ==========================================================================
   1. FONT
   Self-hosted variable font (no external requests). Falls back gracefully.
   ========================================================================== */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand colors ---- */
  --color-primary: #B8894F;          /* bronze — decorative only (lines, icons, highlights) */
  --color-primary-hover: #9E7239;
  --color-primary-soft: #F3EBE0;

  --color-accent: #A65F0B;           /* CTA / active states (white text ≈ 5:1) */
  --color-accent-hover: #8A4E08;
  --color-accent-soft: #FBF1E3;
  --color-accent-light: #D98A2B;     /* decorative only, never behind small white text */

  --color-secondary: #1F6F7C;        /* links, breadcrumb, info */
  --color-secondary-hover: #175560;
  --color-secondary-soft: #E6F1F3;

  /* ---- Backgrounds & surfaces ---- */
  --color-background: #FFFFFF;
  --color-background-soft: #F7F7F7;
  --color-background-warm: #F3EBE0;  /* hero / category cards */
  --color-surface: #FFFFFF;
  --color-surface-soft: #F7F7F7;
  --color-overlay: rgba(34, 34, 34, 0.5);

  /* ---- Text ---- */
  --color-text: #222222;
  --color-text-secondary: #666666;
  --color-text-muted: #767676;
  --color-text-inverse: #FFFFFF;

  /* ---- Borders ---- */
  --color-border: #EAEAEA;
  --color-border-strong: #C9C9C9;

  /* ---- Status ---- */
  --color-success: #1F7A45;
  --color-success-soft: #E7F4EC;
  --color-error: #D32F2F;
  --color-error-soft: #FCEBEB;
  --color-warning: #E0A32C;          /* use with dark text */
  --color-warning-soft: #FDF4E1;
  --color-discount: #D32F2F;

  --color-focus: #1F6F7C;

  /* ---- Typography ---- */
  --font-primary: "Vazirmatn", "IRANSans", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;                 /* max 4 weights */
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-xs: 0.75rem;                                          /* 12 */
  --fs-sm: 0.875rem;                                         /* 14 */
  --fs-base: 1rem;                                           /* 16 — also prevents iOS input zoom */
  --fs-md: 1.125rem;                                         /* 18 */
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);          /* 18 → 22 */
  --fs-h2: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);            /* 22 → 32 */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);             /* 28 → 48 */
  --fs-price: 1.25rem;
  --fs-price-lg: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);

  --lh-tight: 1.35;
  --lh-heading: 1.45;
  --lh-base: 1.8;                    /* Persian needs generous line-height */
  --lh-relaxed: 1.95;

  /* ---- Spacing ---- */
  --space-2xs: 0.25rem;              /* 4 */
  --space-xs: 0.5rem;                /* 8 */
  --space-sm: 1rem;                  /* 16 */
  --space-md: 1.5rem;                /* 24 */
  --space-lg: 3rem;                  /* 48 */
  --space-xl: 6rem;                  /* 96 */
  --section-space: clamp(3rem, 2rem + 4vw, 6rem);   /* 48 → 96 */

  /* ---- Layout ---- */
  --container-width: 1280px;
  --container-padding: 1rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows (subtle; prefer border + whitespace) ---- */
  --shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.06);
  --shadow-md: 0 6px 18px rgba(34, 34, 34, 0.08);
  --shadow-lg: 0 14px 34px rgba(34, 34, 34, 0.10);
  --focus-ring: 0 0 0 3px rgba(31, 111, 124, 0.30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --transition-fast: var(--duration-fast) var(--ease);
  --transition-normal: var(--duration-normal) var(--ease);
  --transition-slow: var(--duration-slow) var(--ease);

  /* ---- Controls (touch targets ≥ 44px) ---- */
  --control-height-sm: 44px;
  --control-height: 48px;
  --control-height-lg: 56px;
}

/* ==========================================================================
   3. WOODMART BRIDGE
   Maps our tokens onto WoodMart's own CSS variables so native components
   (menus, widgets, native buttons) follow the same identity.
   NOTE: verify these names in DevTools (:root) for WoodMart 7.8.6.1.
   ========================================================================== */
:root {
  --wd-text-font: var(--font-primary);
  --wd-text-font-weight: var(--fw-regular);
  --wd-title-font: var(--font-primary);
  --wd-title-font-weight: var(--fw-bold);
  --wd-entities-title-font: var(--font-primary);
  --wd-widget-title-font: var(--font-primary);
  --wd-alternative-font: var(--font-primary);

  --wd-text-color: var(--color-text);
  --wd-title-color: var(--color-text);
  --wd-entities-title-color: var(--color-text);
  --wd-entities-title-color-hover: var(--color-accent);
  --wd-link-color: var(--color-secondary);
  --wd-link-color-hover: var(--color-secondary-hover);

  --wd-primary-color: var(--color-accent);
  --wd-alternative-color: var(--color-secondary);

  --wd-brd-radius: var(--radius-md);
  --wd-form-brd-radius: var(--radius-md);
}

/* ==========================================================================
   4. BASE — :where() keeps specificity at 0 so WoodMart always wins
   ========================================================================== */
:where(body) {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-primary);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
:where(h1) { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
:where(h2) { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
:where(h3) { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
:where(h4, h5, h6) { font-size: var(--fs-md); font-weight: var(--fw-medium); }

:where(button, input, select, textarea) { font-family: inherit; }

:where(img) { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection { background: var(--color-primary-soft); color: var(--color-text); }

/* ==========================================================================
   5. LINKS
   ========================================================================== */
.fr-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--transition-fast);
}
.fr-link:hover { color: var(--color-secondary-hover); }

.fr-link--muted {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.fr-link--muted:hover { color: var(--color-accent); }

/* ==========================================================================
   6. BUTTONS
   Private vars (--_*) let each variant change colors without repeating rules.
   ========================================================================== */
.fr-btn {
  --_bg: var(--color-accent);
  --_bg-hover: var(--color-accent-hover);
  --_fg: var(--color-text-inverse);
  --_bd: var(--_bg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--_fg);
  background-color: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.fr-btn:hover {
  color: var(--_fg);
  background-color: var(--_bg-hover);
  border-color: var(--_bg-hover);
}
.fr-btn:active { transform: translateY(1px); }
.fr-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.fr-btn:disabled,
.fr-btn[aria-disabled="true"],
.fr-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.fr-btn--dark {
  --_bg: var(--color-text);
  --_bg-hover: #000000;
}
.fr-btn--secondary {
  --_bg: transparent;
  --_bg-hover: var(--color-background-soft);
  --_fg: var(--color-text);
  --_bd: var(--color-border-strong);
}
.fr-btn--secondary:hover { border-color: var(--color-text); }
.fr-btn--ghost {
  --_bg: transparent;
  --_bg-hover: var(--color-accent-soft);
  --_fg: var(--color-accent);
  --_bd: transparent;
}
.fr-btn--ghost:hover { border-color: transparent; }

/* Sizes & shapes */
.fr-btn--sm { min-height: var(--control-height-sm); padding: 0 var(--space-sm); font-size: var(--fs-sm); }
.fr-btn--lg { min-height: var(--control-height-lg); padding: 0 var(--space-lg); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.fr-btn--block { display: flex; width: 100%; }
.fr-btn--pill { border-radius: var(--radius-pill); }
.fr-btn--icon { width: var(--control-height); padding: 0; }

/* ==========================================================================
   7. FORM FIELDS
   ========================================================================== */
.fr-field { margin-block-end: var(--space-sm); }

.fr-label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.fr-input,
.fr-select,
.fr-textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--fs-base);          /* 16px: no zoom on iOS */
  line-height: var(--lh-tight);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}
.fr-input:hover,
.fr-select:hover,
.fr-textarea:hover { border-color: var(--color-text-muted); }

.fr-input:focus,
.fr-select:focus,
.fr-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--focus-ring);
}
.fr-input::placeholder,
.fr-textarea::placeholder { color: var(--color-text-muted); opacity: 1; }

.fr-input:disabled,
.fr-select:disabled,
.fr-textarea:disabled {
  color: var(--color-text-muted);
  background-color: var(--color-background-soft);
  cursor: not-allowed;
}

.fr-textarea { min-height: 7.5rem; line-height: var(--lh-base); resize: vertical; }

/* Select: custom chevron (site is RTL → arrow on the left) */
.fr-select {
  padding-inline-end: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 12px 8px;
}

/* Validation states */
.fr-input.is-invalid,
.fr-select.is-invalid,
.fr-textarea.is-invalid,
.fr-input[aria-invalid="true"],
.fr-select[aria-invalid="true"],
.fr-textarea[aria-invalid="true"] { border-color: var(--color-error); }

.fr-input.is-invalid:focus,
.fr-select.is-invalid:focus,
.fr-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25); }

.fr-help  { margin-block-start: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.fr-field-error { margin-block-start: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-error); }

/* ==========================================================================
   8. LAYOUT UTILITIES
   ========================================================================== */
.fr-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

.fr-section { padding-block: var(--section-space); }
.fr-section--soft { background-color: var(--color-background-soft); }
.fr-section--warm { background-color: var(--color-background-warm); }

/* Vertical rhythm: gap between direct children */
.fr-stack > * + * { margin-block-start: var(--stack-gap, var(--space-sm)); }
.fr-stack--sm { --stack-gap: var(--space-xs); }
.fr-stack--md { --stack-gap: var(--space-md); }
.fr-stack--lg { --stack-gap: var(--space-lg); }

.fr-divider { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--space-md); }

/* Screen-reader only */
.fr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   9. TYPOGRAPHY & TEXT UTILITIES
   Guaranteed-effect classes (headings above use :where() and may be overridden)
   ========================================================================== */
.fr-h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.fr-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.fr-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }

.fr-text-xs { font-size: var(--fs-xs); }
.fr-text-sm { font-size: var(--fs-sm); }
.fr-text-md { font-size: var(--fs-md); }

.fr-text-muted { color: var(--color-text-muted); }
.fr-text-secondary { color: var(--color-text-secondary); }
.fr-text-accent { color: var(--color-accent); }
.fr-text-error { color: var(--color-error); }
.fr-text-success { color: var(--color-success); }

.fr-fw-medium { font-weight: var(--fw-medium); }
.fr-fw-bold { font-weight: var(--fw-bold); }

.fr-text-center { text-align: center; }
.fr-text-start { text-align: start; }

/* Product titles: keep cards aligned */
.fr-clamp-2,
.fr-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fr-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.fr-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ==========================================================================
   10. COMMERCE PRIMITIVES
   ========================================================================== */
.fr-price {
  font-size: var(--fs-price);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.fr-price--lg { font-size: var(--fs-price-lg); }
.fr-price--old {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.fr-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-text);
  background-color: var(--color-background-soft);
  border-radius: var(--radius-sm);
}
.fr-badge--discount { color: var(--color-text-inverse); background-color: var(--color-discount); }
.fr-badge--new      { color: var(--color-text-inverse); background-color: var(--color-secondary); }
.fr-badge--success  { color: var(--color-success); background-color: var(--color-success-soft); }
.fr-badge--warning  { color: var(--color-text); background-color: var(--color-warning-soft); }

/* Fixed image ratio (default 1:1) — prevents layout shift */
.fr-ratio { aspect-ratio: var(--ratio, 1 / 1); width: 100%; object-fit: cover; }
.fr-ratio--4x3 { --ratio: 4 / 3; }
.fr-ratio--16x9 { --ratio: 16 / 9; }
.fr-ratio--contain { object-fit: contain; }

/* Loading placeholder (opacity only, no layout jump) */
.fr-skeleton {
  background-color: var(--color-background-soft);
  border-radius: var(--radius-sm);
  animation: fr-pulse 1.4s ease-in-out infinite;
}
@keyframes fr-pulse { 50% { opacity: 0.5; } }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (min-width: 577px)  { :root { --container-padding: 1.25rem; } }
@media (min-width: 1025px) { :root { --container-padding: 1.5rem; } }

/* Visibility helpers (!important is intentional here) */
@media (max-width: 768px)                        { .fr-hide-mobile  { display: none !important; } }
@media (min-width: 769px) and (max-width: 1024px) { .fr-hide-tablet  { display: none !important; } }
@media (min-width: 1025px)                       { .fr-hide-desktop { display: none !important; } }

/* Mobile: buttons in forms/CTAs can go full width */
@media (max-width: 576px) {
  .fr-btn--block-mobile { display: flex; width: 100%; }
}

/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
  .fr-skeleton { animation: none; }
}

/* ==========================================================================
   PRODUCT PRICE OVERRIDE (added after WoodMart's own color scheme to win)
   Plain black price, muted gray strikethrough for the old price.
   ========================================================================== */
ul.products li.product .price,
ul.products li.product .price span,
ul.products li.product .price ins,
ul.products li.product .price ins span,
ul.products li.product .price bdi {
  color: var(--color-text) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  font-weight: var(--fw-bold) !important;
}

ul.products li.product .price del,
ul.products li.product .price del span,
ul.products li.product .price del bdi {
  color: var(--color-text-muted) !important;
  font-weight: var(--fw-regular) !important;
  text-decoration: line-through !important;
  opacity: 1 !important;
}