/* Default: Light mode */
:root,
[data-theme="light"] {
  --color-bg: #f0f4f8;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #e8eef5;
  --color-line: rgba(15, 23, 42, 0.1);

  --color-ink: #0f172a;
  --color-ink-soft: #334155;
  --color-muted: #64748b;
  --color-faint: #94a3b8;

  --color-accent: #0891b2;
  --color-accent-deep: #0e7490;
  --color-accent-mid: #0284c7;
  --color-accent-soft: rgba(8, 145, 178, 0.12);
  --color-accent-ink: #ffffff;
  --color-accent-bright: #0e7490;

  --color-success: #059669;
  --color-success-soft: rgba(5, 150, 105, 0.12);
  --color-danger: #e11d48;
  --color-danger-soft: rgba(225, 29, 72, 0.1);
  --color-warn: #d97706;
  --color-warn-soft: rgba(217, 119, 6, 0.12);

  --color-focus-ring: #0891b2;

  --topbar-bg: #e2e8f0;
  --topbar-ink: #475569;
  --glass-bg: rgba(255, 255, 255, 0.86);
  --header-search-bg: #f8fafc;
  --icon-btn-bg: #f1f5f9;
  --icon-btn-hover: #e2e8f0;
  --cat-strip-bg: rgba(248, 250, 252, 0.95);
  --brand-mark-inner: #ffffff;
  --brand-live-ring: #f0f4f8;
  --steam-card-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --steam-card-border: rgba(15, 23, 42, 0.08);
  --steam-card-hover-border: rgba(8, 145, 178, 0.45);
  --hero-overlay-from: #f0f4f8;
  --hero-overlay-mid: rgba(240, 244, 248, 0.72);
  --hero-img-opacity: 0.95;
  --hero-wash-side: linear-gradient(
    90deg,
    rgba(8, 10, 16, 0.1) 0%,
    rgba(8, 10, 16, 0.35) 22%,
    rgba(8, 10, 16, 0.72) 50%,
    rgba(8, 10, 16, 0.86) 72%,
    rgba(8, 10, 16, 0.92) 100%
  );
  --hero-wash-bottom: linear-gradient(
    0deg,
    rgba(240, 244, 248, 0.55) 0%,
    rgba(240, 244, 248, 0.12) 35%,
    transparent 58%
  );
  --hero-panel-bg: rgba(255, 255, 255, 0.88);
  --hero-panel-border: rgba(15, 23, 42, 0.08);
  --telegram-card-bg: linear-gradient(180deg, #eef7fb, #ffffff);
  --telegram-card-border: rgba(8, 145, 178, 0.28);
  --trust-pillar-bg: rgba(255, 255, 255, 0.9);
  --deals-head-bg: linear-gradient(90deg, rgba(255, 228, 230, 0.95), #fff 40%, #f8fafc);
  --deals-head-border: rgba(225, 29, 72, 0.22);
  --countdown-bg: #fff1f2;
  --promo-banner-bg: linear-gradient(115deg, #f0f9ff 0%, #ecfeff 42%, #f8fafc 100%);
  --promo-banner-border: rgba(8, 145, 178, 0.22);
  --product-media-bg: #e2e8f0;
  --footer-bg: #e8eef5;
  --footer-ribbon-bg: linear-gradient(90deg, #cffafe, #dbeafe, #ede9fe);
  --footer-notice-bg: #ffffff;
  --footer-trust-bg: #ffffff;
  --fab-menu-bg: #ffffff;
  --mobile-dock-bg: rgba(255, 255, 255, 0.95);
  --shadow-soft: 0 16px 32px -12px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 0 20px rgba(8, 145, 178, 0.18);
  --shadow-cyan: 0 8px 24px rgba(8, 145, 178, 0.22);
  --selection-bg: rgba(8, 145, 178, 0.2);
  --selection-ink: #0f172a;
  --price-color: #0e7490;
  --white-text: #0f172a;
  --hero-title: #0f172a;
  --hero-lead: #334155;
  --feature-chip-bg: rgba(255, 255, 255, 0.85);
  --feature-chip-ink: #334155;
  --slider-arrow-bg: rgba(15, 23, 42, 0.08);
  --slider-dot: rgba(15, 23, 42, 0.2);
  --ghost-btn-bg: rgba(15, 23, 42, 0.05);
  --ghost-btn-border: rgba(15, 23, 42, 0.12);
  --ghost-btn-ink: #0f172a;

  --font-display: "Changa", "Vazirmatn", Tahoma, sans-serif;
  --font-body: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-mono: "Vazirmatn", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-hero: clamp(1.5rem, 3.5vw, 2.5rem);

  --leading-tight: 1.25;
  --leading-body: 1.7;
  --tracking-display: 0.01em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: clamp(32px, 5vw, 56px);
  --page-gutter: clamp(1rem, 3vw, 1.5rem);
  --content-max: 1280px;
  --content-narrow: 720px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-none: none;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 400ms;

  --header-h: 64px;
  --color-scheme: light;
}

/* Dark mode */
[data-theme="dark"] {
  --color-bg: #0b0e14;
  --color-bg-elevated: #0d121c;
  --color-surface: #141b29;
  --color-surface-2: #182030;
  --color-line: rgba(255, 255, 255, 0.08);

  --color-ink: #f1f5f9;
  --color-ink-soft: #cbd5e1;
  --color-muted: #94a3b8;
  --color-faint: #64748b;

  --color-accent: #22d3ee;
  --color-accent-deep: #0284c7;
  --color-accent-mid: #0ea5e9;
  --color-accent-soft: rgba(34, 211, 238, 0.12);
  --color-accent-ink: #041016;
  --color-accent-bright: #22d3ee;

  --color-success: #34d399;
  --color-success-soft: rgba(52, 211, 153, 0.16);
  --color-danger: #f43f5e;
  --color-danger-soft: rgba(244, 63, 94, 0.14);
  --color-warn: #fbbf24;
  --color-warn-soft: rgba(251, 191, 36, 0.16);

  --color-focus-ring: #67e8f9;

  --topbar-bg: #07090e;
  --topbar-ink: #94a3b8;
  --glass-bg: rgba(16, 20, 30, 0.78);
  --header-search-bg: #131926;
  --icon-btn-bg: #172030;
  --icon-btn-hover: #1f2b42;
  --cat-strip-bg: rgba(14, 19, 29, 0.92);
  --brand-mark-inner: #0d121c;
  --brand-live-ring: #0b0e14;
  --steam-card-bg: linear-gradient(180deg, rgba(22, 27, 40, 0.85) 0%, rgba(13, 17, 26, 0.96) 100%);
  --steam-card-border: rgba(255, 255, 255, 0.07);
  --steam-card-hover-border: rgba(56, 189, 248, 0.4);
  --hero-overlay-from: #0b0e14;
  --hero-overlay-mid: rgba(11, 14, 20, 0.72);
  --hero-img-opacity: 0.85;
  --hero-wash-side: linear-gradient(
    90deg,
    rgba(8, 10, 16, 0.1) 0%,
    rgba(8, 10, 16, 0.35) 22%,
    rgba(8, 10, 16, 0.72) 50%,
    rgba(8, 10, 16, 0.86) 72%,
    rgba(8, 10, 16, 0.92) 100%
  );
  --hero-wash-bottom: linear-gradient(
    0deg,
    rgba(11, 14, 20, 0.7) 0%,
    rgba(11, 14, 20, 0.2) 40%,
    transparent 65%
  );
  --hero-panel-bg: rgba(13, 18, 28, 0.78);
  --hero-panel-border: rgba(255, 255, 255, 0.1);
  --telegram-card-bg: linear-gradient(180deg, #121c2e, #0d121c);
  --telegram-card-border: rgba(34, 211, 238, 0.22);
  --trust-pillar-bg: rgba(16, 20, 30, 0.75);
  --deals-head-bg: linear-gradient(90deg, rgba(76, 5, 25, 0.35), #131927 45%, #121622);
  --deals-head-border: rgba(244, 63, 94, 0.22);
  --countdown-bg: #090d15;
  --promo-banner-bg: linear-gradient(115deg, #101826 0%, #122433 48%, #0f2f3a 100%);
  --promo-banner-border: rgba(34, 211, 238, 0.22);
  --product-media-bg: #0d1620;
  --footer-bg: #070a10;
  --footer-ribbon-bg: linear-gradient(90deg, rgba(8, 47, 73, 0.65), rgba(30, 58, 138, 0.55), rgba(88, 28, 135, 0.45));
  --footer-notice-bg: #0e1524;
  --footer-trust-bg: #121824;
  --fab-menu-bg: #121824;
  --mobile-dock-bg: rgba(13, 18, 28, 0.95);
  --shadow-soft: 0 16px 32px -10px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 20px rgba(14, 165, 233, 0.25);
  --shadow-cyan: 0 8px 24px rgba(6, 182, 212, 0.28);
  --selection-bg: rgba(34, 211, 238, 0.35);
  --selection-ink: #000;
  --price-color: #22d3ee;
  --white-text: #ffffff;
  --hero-title: #ffffff;
  --hero-lead: #cbd5e1;
  --feature-chip-bg: rgba(0, 0, 0, 0.4);
  --feature-chip-ink: #cbd5e1;
  --slider-arrow-bg: rgba(255, 255, 255, 0.1);
  --slider-dot: rgba(255, 255, 255, 0.25);
  --ghost-btn-bg: rgba(255, 255, 255, 0.08);
  --ghost-btn-border: rgba(255, 255, 255, 0.12);
  --ghost-btn-ink: #ffffff;

  --color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
  }
}