/* ==========================================================================
   [BRAND CONFIG] DESIGN TOKENS — Luxury Jewelry E-commerce Design System
   --------------------------------------------------------------------------
   هیچ رنگ، فونت، شعاع یا فاصله‌ای داخل کامپوننت‌ها Hardcode نشده است.
   تمام مقادیر از این فایل خوانده می‌شوند و از طریق پنل «هویت برند»
   (کلید میان‌بر: Alt + B) در زمان اجرا قابل تغییرند و در localStorage
   ذخیره می‌شوند.
   ========================================================================== */

:root {
  /* ---------- BRAND IDENTITY PLACEHOLDERS ---------- */
  /* این مقادیر توسط js/brand.js از BrandConfig خوانده و Override می‌شوند */
  --brand-name: "[نام برند]";
  --brand-tagline: "[شعار برند]";
  --brand-monogram: "JJ";

  /* ---------- SPACING SCALE (Spacing Control) ---------- */
  --sp-unit: 4px;
  --sp-1: calc(var(--sp-unit) * 1);   /* 4  */
  --sp-2: calc(var(--sp-unit) * 2);   /* 8  */
  --sp-3: calc(var(--sp-unit) * 3);   /* 12 */
  --sp-4: calc(var(--sp-unit) * 4);   /* 16 */
  --sp-5: calc(var(--sp-unit) * 5);   /* 20 */
  --sp-6: calc(var(--sp-unit) * 6);   /* 24 */
  --sp-8: calc(var(--sp-unit) * 8);   /* 32 */
  --sp-10: calc(var(--sp-unit) * 10); /* 40 */
  --sp-12: calc(var(--sp-unit) * 12); /* 48 */
  --sp-16: calc(var(--sp-unit) * 16); /* 64 */
  --sp-20: calc(var(--sp-unit) * 20); /* 80 */
  --sp-24: calc(var(--sp-unit) * 24); /* 96 */

  --section-y: clamp(56px, 7vw, 104px);
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(16px, 4vw, 40px);
  --grid-gap: clamp(12px, 1.6vw, 24px);

  /* ---------- BORDER RADIUS (Radius Control) ---------- */
  --radius-unit: 1;
  --r-xs: calc(2px * var(--radius-unit));
  --r-sm: calc(4px * var(--radius-unit));
  --r-md: calc(8px * var(--radius-unit));
  --r-lg: calc(14px * var(--radius-unit));
  --r-xl: calc(22px * var(--radius-unit));
  --r-pill: 999px;

  /* ---------- BORDER WIDTH (Border Control) ---------- */
  --bw-unit: 1;
  --bw: calc(1px * var(--bw-unit));
  --bw-2: calc(2px * var(--bw-unit));

  /* ---------- SHADOW INTENSITY (Shadow Control) ---------- */
  --sh-unit: 1;
  --sh-xs: 0 1px 2px rgb(10 8 5 / calc(0.05 * var(--sh-unit)));
  --sh-sm: 0 2px 8px rgb(10 8 5 / calc(0.06 * var(--sh-unit))),
           0 1px 2px rgb(10 8 5 / calc(0.04 * var(--sh-unit)));
  --sh-md: 0 8px 24px rgb(10 8 5 / calc(0.08 * var(--sh-unit))),
           0 2px 6px rgb(10 8 5 / calc(0.04 * var(--sh-unit)));
  --sh-lg: 0 20px 48px rgb(10 8 5 / calc(0.12 * var(--sh-unit))),
           0 6px 16px rgb(10 8 5 / calc(0.06 * var(--sh-unit)));
  --sh-gold: 0 10px 30px color-mix(in srgb, var(--c-gold) calc(22% * var(--sh-unit)), transparent);

  /* ---------- GOLD ACCENT INTENSITY (Gold Control) ---------- */
  --gold-unit: 1;
  --gold-soft: color-mix(in srgb, var(--c-gold) calc(12% * var(--gold-unit)), transparent);
  --gold-softer: color-mix(in srgb, var(--c-gold) calc(6% * var(--gold-unit)), transparent);
  --gold-line: color-mix(in srgb, var(--c-gold) calc(28% * var(--gold-unit)), transparent);
  --gold-glow: color-mix(in srgb, var(--c-gold) calc(35% * var(--gold-unit)), transparent);
  --gold-text: color-mix(in srgb, var(--c-gold) calc(70% + 30% * var(--gold-unit)), var(--c-text));

  /* ---------- TYPOGRAPHY SCALE (Type Scale Control) ---------- */
  --ts: 1;
  --font-fa: "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-num: var(--font-en);

  --fs-display: calc(clamp(2.4rem, 6.2vw, 4.6rem) * var(--ts));
  --fs-h1: calc(clamp(1.9rem, 4.2vw, 3rem) * var(--ts));
  --fs-h2: calc(clamp(1.5rem, 3vw, 2.15rem) * var(--ts));
  --fs-h3: calc(clamp(1.18rem, 2vw, 1.45rem) * var(--ts));
  --fs-h4: calc(clamp(1rem, 1.4vw, 1.12rem) * var(--ts));
  --fs-body: calc(clamp(0.925rem, 1vw, 1rem) * var(--ts));
  --fs-body-lg: calc(clamp(1rem, 1.2vw, 1.12rem) * var(--ts));
  --fs-caption: calc(clamp(0.78rem, 0.9vw, 0.85rem) * var(--ts));
  --fs-button: calc(clamp(0.85rem, 0.95vw, 0.92rem) * var(--ts));
  --fs-label: calc(clamp(0.68rem, 0.8vw, 0.74rem) * var(--ts));

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-snug: 1.5;
  --lh-body: 1.95;
  --ls-tight: -0.01em;
  --ls-wide: 0.14em;
  --ls-wider: 0.22em;

  /* ---------- ANIMATION SPEED (Motion Control) ---------- */
  --motion-unit: 1;
  --t-fast: calc(140ms * var(--motion-unit));
  --t-base: calc(260ms * var(--motion-unit));
  --t-slow: calc(480ms * var(--motion-unit));
  --t-slower: calc(800ms * var(--motion-unit));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- IMAGE STYLE (Image Control) ---------- */
  --img-radius: var(--r-lg);
  --img-sat: 1;
  --img-contrast: 1;
  --img-warm: 0;
  --img-scale-hover: 1.06;

  /* ---------- Z-INDEX SCALE ---------- */
  --z-header: 60;
  --z-drawer: 90;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 130;
  --z-bottomnav: 70;

  /* ---------- HEADER ---------- */
  --header-h: 76px;
  --topbar-h: 38px;
}

/* ==========================================================================
   THEME 01 — LUXURY GOLD (پیش‌فرض)
   مشکی عمیق + طلایی + کرم  |  Luxury / Premium / Exclusive
   ========================================================================== */
:root,
[data-theme="luxury-gold"] {
  --c-bg: #0B0A08;
  --c-bg-alt: #100E0B;
  --c-surface: #15130F;
  --c-surface-2: #1C1915;
  --c-surface-3: #232019;
  --c-inverse: #F6F0E4;
  --c-text: #F4EFE6;
  --c-text-soft: #D8D0C2;
  --c-muted: #9A9284;
  --c-border: #2C2822;
  --c-border-strong: #443D33;
  --c-primary: #C9A45C;
  --c-secondary: #EFE6D4;
  --c-gold: #D4AF37;
  --c-gold-2: #F0DFA8;
  --c-gold-deep: #9A7B2C;
  --c-success: #5FA97B;
  --c-error: #D9695C;
  --c-warning: #D9A441;
  --c-info: #6C93C4;
  --c-on-gold: #14110B;
  --c-overlay: rgb(5 4 3 / 0.72);
  --c-glass: rgb(21 19 15 / 0.72);
  --c-header: rgb(11 10 8 / 0.82);
  --c-skeleton: #1F1C17;
  --scheme: dark;
}

/* ==========================================================================
   THEME 02 — MINIMAL JEWELRY
   سفید + کرم + طلایی ظریف  |  Minimal / Clean / Elegant
   ========================================================================== */
[data-theme="minimal-jewelry"] {
  --c-bg: #FCFAF6;
  --c-bg-alt: #F6F1E8;
  --c-surface: #FFFFFF;
  --c-surface-2: #FAF7F1;
  --c-surface-3: #F3EEE4;
  --c-inverse: #17150F;
  --c-text: #1C1A15;
  --c-text-soft: #46413A;
  --c-muted: #8B8478;
  --c-border: #E7E0D4;
  --c-border-strong: #D3C9B7;
  --c-primary: #B08D4F;
  --c-secondary: #3A3630;
  --c-gold: #C9A55F;
  --c-gold-2: #E8D7A9;
  --c-gold-deep: #8E6F31;
  --c-success: #3E8A5F;
  --c-error: #C0483C;
  --c-warning: #B4832A;
  --c-info: #4C719E;
  --c-on-gold: #1A1710;
  --c-overlay: rgb(28 26 21 / 0.44);
  --c-glass: rgb(255 255 255 / 0.78);
  --c-header: rgb(252 250 246 / 0.86);
  --c-skeleton: #EFE9DE;
  --scheme: light;
}

/* ==========================================================================
   THEME 03 — DARK LUXURY
   مشکی + خاکستری تیره + طلایی  |  Modern / Bold / Premium
   ========================================================================== */
[data-theme="dark-luxury"] {
  --c-bg: #08090A;
  --c-bg-alt: #0E1012;
  --c-surface: #131518;
  --c-surface-2: #191C20;
  --c-surface-3: #212529;
  --c-inverse: #F2F3F5;
  --c-text: #EDEFF2;
  --c-text-soft: #CFD4DA;
  --c-muted: #8B939C;
  --c-border: #24282D;
  --c-border-strong: #3A4048;
  --c-primary: #D6B671;
  --c-secondary: #E4E7EB;
  --c-gold: #E0C07A;
  --c-gold-2: #F6E7BE;
  --c-gold-deep: #A5854A;
  --c-success: #58B083;
  --c-error: #E0705F;
  --c-warning: #E0AE55;
  --c-info: #7FA3D0;
  --c-on-gold: #12130F;
  --c-overlay: rgb(3 4 5 / 0.76);
  --c-glass: rgb(19 21 24 / 0.74);
  --c-header: rgb(8 9 10 / 0.84);
  --c-skeleton: #1A1D21;
  --scheme: dark;
}

/* ==========================================================================
   STYLE MODES — Minimal ↔ Luxury ↔ Editorial ↔ Modern
   فقط توکن‌ها تغییر می‌کنند؛ Layout ثابت می‌ماند.
   ========================================================================== */
[data-style="minimal"] {
  --radius-unit: 0.4;
  --sh-unit: 0.35;
  --bw-unit: 1;
  --gold-unit: 0.55;
  --btn-radius: var(--r-sm);
  --card-style: flat;
  --card-pad: var(--sp-4);
  --card-border: var(--bw) solid var(--c-border);
  --card-shadow: none;
  --img-radius: var(--r-sm);
  --img-sat: 0.92;
  --img-contrast: 1.02;
  --section-y: clamp(48px, 5.6vw, 84px);
  --display-weight: 300;
  --display-tracking: 0;
  --display-transform: none;
}

[data-style="luxury"] {
  --radius-unit: 0.8;
  --sh-unit: 1.1;
  --bw-unit: 1;
  --gold-unit: 1.15;
  --btn-radius: var(--r-pill);
  --card-style: bordered;
  --card-pad: var(--sp-5);
  --card-border: var(--bw) solid var(--c-border);
  --card-shadow: var(--sh-sm);
  --img-radius: var(--r-lg);
  --img-sat: 1.04;
  --img-contrast: 1.03;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --display-transform: none;
}

[data-style="editorial"] {
  --radius-unit: 0.15;
  --sh-unit: 0.2;
  --bw-unit: 1;
  --gold-unit: 0.7;
  --btn-radius: 0px;
  --card-style: line;
  --card-pad: var(--sp-5);
  --card-border: 0;
  --card-shadow: none;
  --img-radius: 2px;
  --img-sat: 0.86;
  --img-contrast: 1.08;
  --section-y: clamp(64px, 8vw, 120px);
  --display-weight: 300;
  --display-tracking: -0.02em;
  --display-transform: none;
}

[data-style="modern"] {
  --radius-unit: 1.8;
  --sh-unit: 1.5;
  --bw-unit: 1;
  --gold-unit: 1;
  --btn-radius: var(--r-lg);
  --card-style: soft;
  --card-pad: var(--sp-5);
  --card-border: var(--bw) solid color-mix(in srgb, var(--c-border) 70%, transparent);
  --card-shadow: var(--sh-md);
  --img-radius: var(--r-xl);
  --img-sat: 1.08;
  --img-contrast: 1;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --display-transform: none;
}

/* Button style variants */
[data-btn="pill"]   { --btn-radius: var(--r-pill); }
[data-btn="square"] { --btn-radius: var(--r-xs); }
[data-btn="soft"]   { --btn-radius: var(--r-lg); }

/* Icon style variants */
[data-icon="line"]   { --icon-w: 1.4; }
[data-icon="thin"]   { --icon-w: 1; }
[data-icon="bold"]   { --icon-w: 2; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-unit: 0.01; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}