:root {
  --lucky-color-primary: #2f75b7;
  --lucky-color-primary-strong: #245c91;
  --lucky-color-primary-soft: #e8f4ff;
  --lucky-color-accent: #ef6f8d;
  --lucky-color-accent-strong: #c94e6b;
  --lucky-color-accent-soft: #fff0f4;
  --lucky-color-lilac: #eee9ff;
  --lucky-color-blush: #ffe7ee;
  --lucky-color-butter: #fff2c9;
  --lucky-color-canvas: #fffbfd;
  --lucky-color-surface: #fff;
  --lucky-color-surface-muted: #f7f5fc;
  --lucky-color-ink: #17223b;
  --lucky-color-muted: #667085;
  --lucky-color-border: #e6e2f0;
  --lucky-color-danger: #a73838;
  --lucky-color-success: #2f7352;
  --lucky-color-footer: #172944;

  --lucky-font-display: "Manrope", "Alexandria", "Segoe UI", sans-serif;
  --lucky-font-body: "Manrope", "Alexandria", "Segoe UI", sans-serif;
  --lucky-font-rtl: "Alexandria", "Tahoma", "Segoe UI", sans-serif;

  --lucky-shell: min(1220px, calc(100vw - 32px));
  --lucky-section-space: clamp(52px, 6vw, 86px);
  --lucky-radius-control: 14px;
  --lucky-radius-card: 22px;
  --lucky-radius-panel: 30px;
  --lucky-radius-pill: 999px;
  --lucky-shadow-card: 0 14px 34px rgb(58 54 104 / 9%);
  --lucky-shadow-lift: 0 24px 54px rgb(58 54 104 / 15%);
  --lucky-focus-ring: 0 0 0 3px rgb(47 117 183 / 28%);
  --lucky-transition-fast: 160ms cubic-bezier(.2, .8, .2, 1);
  --lucky-transition: 260ms cubic-bezier(.2, .8, .2, 1);
}

html[lang|="fa"] {
  --lucky-font-display: "Kalameh", "Alexandria", "Tahoma", sans-serif;
  --lucky-font-body: "Kalameh", "Alexandria", "Tahoma", sans-serif;
  --lucky-font-rtl: "Kalameh", "Alexandria", "Tahoma", sans-serif;
}

html[lang|="ar"] {
  --lucky-font-display: "Alexandria", "Tahoma", "Segoe UI", sans-serif;
  --lucky-font-body: "Alexandria", "Tahoma", "Segoe UI", sans-serif;
  --lucky-font-rtl: "Alexandria", "Tahoma", "Segoe UI", sans-serif;
}

.lucky-tone-home,
.lucky-tone-catalog,
.lucky-tone-about,
.lucky-tone-contact,
.lucky-tone-bulk {
  --lucky-page-accent: var(--lucky-color-primary);
  --lucky-page-accent-strong: var(--lucky-color-primary-strong);
  --lucky-page-surface: var(--lucky-color-surface);
  --lucky-page-surface-strong: var(--lucky-color-surface-muted);
  --lucky-page-border: var(--lucky-color-border);
}

@media (max-width: 680px) {
  :root {
    --lucky-shell: min(100% - 24px, 1220px);
    --lucky-section-space: 46px;
  }
}