/* ==========================================================================
   Design tokens
   Single source of truth for the storefront theme. Everything else consumes
   these variables, so re-skinning the whole shop means editing this file only.

   Light burgundy / wine palette. Deliberately light: large areas stay near
   white and the burgundy is reserved for accents and calls to action so the
   result reads premium rather than heavy.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-primary: #8b3a4a;
  --color-primary-dark: #6f2c3a;
  --color-primary-light: #b86a78;
  --color-accent: #c98a95;

  /* --- Neutrals --------------------------------------------------------- */
  --color-background: #faf7f8;
  --color-surface: #ffffff;
  --color-text: #2f2528;
  --color-muted: #756a6d;
  --color-border: #e8dde0;
  --color-border-strong: #d9c8cd;

  /* --- Feedback (tinted to sit with the burgundy) ----------------------- */
  --color-success: #2f7d5d;
  --color-success-bg: #eaf5ef;
  --color-danger: #a33a45;
  --color-danger-bg: #fbeef0;
  --color-warning: #8a6a1f;
  --color-warning-bg: #fbf4e3;
  --color-info: #35617d;
  --color-info-bg: #eef4f8;

  /* --- Tinted surfaces -------------------------------------------------- */
  --color-primary-soft: #f6edef;
  --color-primary-softer: #fbf6f7;
  --color-accent-soft: #f2e5e8;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Vazirmatn", "IRANSans", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Tahoma, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --line-height-base: 1.7;
  --line-height-heading: 1.3;
  --letter-spacing-wide: 0.04em;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-gap: var(--space-7);

  /* --- Radii (kept small: the brief asks for minimal, not bubbly) -------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Elevation: subtle, layered, never heavy ------------------------- */
  --shadow-xs: 0 1px 2px rgba(47, 37, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(47, 37, 40, 0.06), 0 1px 2px rgba(47, 37, 40, 0.04);
  --shadow: 0 2px 8px rgba(47, 37, 40, 0.07);
  --shadow-lg: 0 8px 24px rgba(47, 37, 40, 0.1);
  --shadow-focus: 0 0 0 3px rgba(139, 58, 74, 0.18);

  /* --- Motion ------------------------------------------------------------ */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --slider-duration: 6s;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1280px;

  /* The sticky `.header.container` is TWO bars: this row (brand + search +
     actions) and the primary nav beneath it. Each token is one bar's height so
     they can be tuned independently, and --header-offset is their sum for the
     places that need the total (scroll-padding-top, the mobile drawer).

     Both bars are sized from their tallest child rather than from padding:
     the search input and the action buttons are a fixed 40px, and the brand
     block (wordmark + tagline) is ~43px. So 52 and 40 leave a real but tight
     margin instead of the ~20px of slack these used to carry. */
  --navbar-height: 52px;
  --nav-primary-height: 40px;
  --header-offset: calc(var(--navbar-height) + var(--nav-primary-height));

  --topbar-height: 38px;
  --focus-ring: 2px solid var(--color-primary);
  --focus-ring-offset: 2px;
  --z-navbar: 1000;
  --z-dropdown: 1010;
}