/*
 * ═══════════════════════════════════════════════════════════════
 *  الهوية البصرية المركزية
 *  ─────────────────────────────────────────────────────────────
 *  Restaurant (برتقالية) = :root / .restaurant-theme
 *  Store (زرقاء من master) = .store-theme
 * ═══════════════════════════════════════════════════════════════
 */

:root,
.restaurant-theme {
  /* ── ألوان العلامة الأساسية ── */
  --primary: #b6462f;
  --primary-deep: #8f2f22;
  --primary-rgb: 182, 70, 47;
  --secondary: #f0a23a;
  --secondary-rgb: 240, 162, 58;
  --accent: #2f6b5f;
  --accent-rgb: 47, 107, 95;

  /* ── خلفيات وأسطح ── */
  --bg-base: #fff8f1;
  --bg-soft: #fff1df;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #fffdf9;
  --surface-muted: rgba(255, 244, 232, 0.72);
  --surface-image: linear-gradient(180deg, #ffe7c9 0%, #fff6ea 100%);
  --hero-cta-bg: #fff8f1;
  --chip-bg: rgba(255, 248, 241, 0.88);
  --chip-fg: var(--primary-deep);
  --nav-link-bg: rgba(255, 255, 255, 0.7);
  --auth-btn-bg: rgba(255, 255, 255, 0.72);

  /* ── نصوص ── */
  --text-main: #241512;
  --text-soft: #7b645b;
  --text-on-brand: #fff8f1;
  --text-navbar: #241512;
  --text-navbar-soft: #7b645b;

  /* ── حدود وظلال ── */
  --line: rgba(106, 59, 45, 0.12);
  --line-strong: rgba(106, 59, 45, 0.18);
  --shadow-rgb: 106, 59, 45;
  --shadow-soft: 0 18px 50px rgba(106, 59, 45, 0.12);
  --shadow-hover: 0 22px 65px rgba(182, 70, 47, 0.22);

  /* ── تدرجات مشتقة ── */
  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-brand-hover: linear-gradient(135deg, var(--primary-deep) 0%, #e59527 100%);
  --gradient-hero: linear-gradient(135deg, rgba(143, 47, 34, 0.95) 0%, rgba(182, 70, 47, 0.93) 46%, rgba(240, 162, 58, 0.9) 100%);
  --gradient-table-header: linear-gradient(135deg, rgba(143, 47, 34, 0.95) 0%, rgba(182, 70, 47, 0.92) 55%, rgba(240, 162, 58, 0.88) 100%);
  --gradient-bar-dark: linear-gradient(90deg, #351913 0%, #5a251b 100%);
  --gradient-navbar: rgba(255, 249, 243, 0.72);
  --gradient-body: radial-gradient(circle at top right, rgba(240, 162, 58, 0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(182, 70, 47, 0.1), transparent 25%),
    linear-gradient(180deg, #fffdf9 0%, var(--bg-base) 42%, #fff4e8 100%);

  /* ── خط ── */
  --font-family: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ── زوايا ── */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── حالات ── */
  --color-danger: #cf3d2e;
  --color-warning: #b56d08;
  --color-warning-bg: rgba(240, 162, 58, 0.14);
  --color-success: #2f6b5f;
  --color-whatsapp: #25d366;
}

/* ثيمة المتجر الزرقاء (من برانش master) */
.store-theme {
  --primary: #07006A;
  --primary-deep: #05004d;
  --primary-rgb: 7, 0, 106;
  --secondary: #7D6AFF;
  --secondary-rgb: 125, 106, 255;
  --accent: #8b7aff;
  --accent-rgb: 139, 122, 255;

  --bg-base: #1E1E1E;
  --bg-soft: #252525;
  --surface: rgba(42, 42, 42, 0.92);
  --surface-strong: #2a2a2a;
  --surface-muted: rgba(36, 36, 48, 0.85);
  --surface-image: linear-gradient(180deg, #151528 0%, #2a2a2a 100%);
  --hero-cta-bg: #ffffff;
  --chip-bg: rgba(125, 106, 255, 0.22);
  --chip-fg: #ffffff;
  --nav-link-bg: rgba(255, 255, 255, 0.1);
  --auth-btn-bg: rgba(255, 255, 255, 0.12);

  --text-main: #e0e0e0;
  --text-soft: #a8a8b3;
  --text-on-brand: #ffffff;
  --text-navbar: #ffffff;
  --text-navbar-soft: rgba(255, 255, 255, 0.82);

  --line: rgba(125, 106, 255, 0.22);
  --line-strong: rgba(125, 106, 255, 0.35);
  --shadow-rgb: 0, 0, 0;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 22px 65px rgba(125, 106, 255, 0.28);

  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-brand-hover: linear-gradient(135deg, #0a0080 0%, #8b7aff 100%);
  --gradient-hero: linear-gradient(135deg, rgba(7, 0, 106, 0.96) 0%, rgba(10, 0, 128, 0.94) 48%, rgba(125, 106, 255, 0.9) 100%);
  --gradient-table-header: linear-gradient(135deg, rgba(7, 0, 106, 0.95) 0%, rgba(10, 0, 128, 0.92) 55%, rgba(125, 106, 255, 0.88) 100%);
  --gradient-bar-dark: linear-gradient(90deg, #040035 0%, #07006A 100%);
  --gradient-navbar: linear-gradient(135deg, var(--primary) 0%, #0a0080 100%);
  --gradient-body: radial-gradient(circle at top right, rgba(125, 106, 255, 0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(7, 0, 106, 0.35), transparent 28%),
    linear-gradient(180deg, #1E1E1E 0%, #16161f 50%, #12121a 100%);

  --color-danger: #ff6b6b;
  --color-warning: #ffc107;
  --color-warning-bg: rgba(255, 193, 7, 0.16);
  --color-success: #7D6AFF;
  --color-whatsapp: #25d366;
}

/* قالب مخصص — ألوان الهوية تُحقن من السيرفر؛ الأسطح تتبع الوضع النهاري/الليلي */
.custom-theme {
  --bg-base: #f7f8fb;
  --bg-soft: #eef1f7;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: #ffffff;
  --surface-muted: rgba(238, 241, 247, 0.85);
  --surface-image: linear-gradient(180deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--secondary-rgb), 0.08) 100%);
  --hero-cta-bg: #ffffff;
  --chip-bg: rgba(var(--primary-rgb), 0.14);
  --chip-fg: var(--primary-deep);
  --nav-link-bg: rgba(255, 255, 255, 0.72);
  --auth-btn-bg: rgba(255, 255, 255, 0.78);
  --text-main: #1a1d26;
  --text-soft: #667085;
  --text-on-brand: #ffffff;
  --text-navbar: #1a1d26;
  --text-navbar-soft: #667085;
  --line: rgba(var(--primary-rgb), 0.16);
  --line-strong: rgba(var(--primary-rgb), 0.28);
  --shadow-rgb: 26, 29, 38;
  --shadow-soft: 0 18px 50px rgba(26, 29, 38, 0.1);
  --gradient-navbar: rgba(255, 255, 255, 0.78);
  --gradient-body: radial-gradient(circle at top right, rgba(var(--secondary-rgb), 0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(var(--primary-rgb), 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-base) 45%, var(--bg-soft) 100%);
  --color-danger: #cf3d2e;
  --color-warning: #b56d08;
  --color-warning-bg: rgba(var(--secondary-rgb), 0.16);
  --color-whatsapp: #25d366;
}

/* ── وضع نهاري / ليلي (يتجاوز أسطح الثيم مع الإبقاء على ألوان الهوية) ── */
html[data-scheme="light"] body {
  --bg-base: #fff8f1;
  --bg-soft: #fff1df;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: #fffdf9;
  --surface-muted: rgba(255, 244, 232, 0.72);
  --surface-image: linear-gradient(180deg, rgba(var(--secondary-rgb), 0.28) 0%, rgba(var(--primary-rgb), 0.08) 100%);
  --hero-cta-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.88);
  --chip-fg: var(--primary-deep);
  --nav-link-bg: rgba(255, 255, 255, 0.72);
  --auth-btn-bg: rgba(255, 255, 255, 0.78);
  --text-main: #241512;
  --text-soft: #7b645b;
  --text-on-brand: #fff8f1;
  --text-navbar: #241512;
  --text-navbar-soft: #7b645b;
  --line: rgba(var(--primary-rgb), 0.14);
  --line-strong: rgba(var(--primary-rgb), 0.24);
  --shadow-rgb: 40, 30, 28;
  --shadow-soft: 0 18px 50px rgba(40, 30, 28, 0.1);
  --gradient-navbar: rgba(255, 249, 243, 0.82);
  --gradient-body: radial-gradient(circle at top right, rgba(var(--secondary-rgb), 0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(var(--primary-rgb), 0.1), transparent 25%),
    linear-gradient(180deg, #fffdf9 0%, var(--bg-base) 42%, var(--bg-soft) 100%);
}

html[data-scheme="light"] body.store-theme,
html[data-scheme="light"] body.custom-theme {
  --bg-base: #f5f6fb;
  --bg-soft: #eceff7;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-muted: rgba(236, 239, 247, 0.85);
  --text-main: #1a1d26;
  --text-soft: #667085;
  --text-navbar: #1a1d26;
  --text-navbar-soft: #667085;
  --gradient-navbar: rgba(255, 255, 255, 0.88);
  --gradient-body: radial-gradient(circle at top right, rgba(var(--secondary-rgb), 0.14), transparent 32%),
    radial-gradient(circle at bottom left, rgba(var(--primary-rgb), 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-base) 45%, var(--bg-soft) 100%);
}

/* القالب المخصص يحتفظ بتدرج الهوية حتى في الوضع النهاري */
html[data-scheme="light"] body.custom-theme {
  --gradient-navbar: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --text-navbar: #ffffff;
  --text-navbar-soft: rgba(255, 255, 255, 0.86);
  --nav-link-bg: rgba(255, 255, 255, 0.16);
  --auth-btn-bg: rgba(255, 255, 255, 0.14);
}

html[data-scheme="dark"] body {
  --bg-base: #1E1E1E;
  --bg-soft: #252525;
  --surface: rgba(42, 42, 42, 0.92);
  --surface-strong: #2a2a2a;
  --surface-muted: rgba(36, 36, 48, 0.85);
  --surface-image: linear-gradient(180deg, rgba(var(--primary-rgb), 0.35) 0%, #2a2a2a 100%);
  --hero-cta-bg: #ffffff;
  --chip-bg: rgba(var(--secondary-rgb), 0.22);
  --chip-fg: #ffffff;
  --nav-link-bg: rgba(255, 255, 255, 0.1);
  --auth-btn-bg: rgba(255, 255, 255, 0.12);
  --text-main: #e0e0e0;
  --text-soft: #a8a8b3;
  --text-on-brand: #ffffff;
  --text-navbar: #ffffff;
  --text-navbar-soft: rgba(255, 255, 255, 0.82);
  --line: rgba(var(--secondary-rgb), 0.22);
  --line-strong: rgba(var(--secondary-rgb), 0.35);
  --shadow-rgb: 0, 0, 0;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 22px 65px rgba(var(--secondary-rgb), 0.28);
  --gradient-navbar: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-body: radial-gradient(circle at top right, rgba(var(--secondary-rgb), 0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(var(--primary-rgb), 0.35), transparent 28%),
    linear-gradient(180deg, #1E1E1E 0%, #16161f 50%, #12121a 100%);
  --color-danger: #ff6b6b;
  --color-warning: #ffc107;
  --color-warning-bg: rgba(255, 193, 7, 0.16);
}

html[data-scheme="dark"] body.custom-theme {
  --gradient-navbar: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --surface-image: linear-gradient(180deg, rgba(var(--primary-rgb), 0.28) 0%, rgba(var(--secondary-rgb), 0.12) 55%, #2a2a2a 100%);
}

.custom-theme .product-price {
  color: var(--brand-mix, var(--accent));
}

.custom-theme .product-cta,
.custom-theme .section-kicker,
.custom-theme .back-link {
  color: var(--secondary);
}

.custom-theme .product-chip {
  background: var(--gradient-brand);
  color: #fff;
}

.custom-theme .btn-register,
.custom-theme .btn-dashboard {
  background: var(--gradient-brand);
  color: #fff;
}

html[data-scheme="dark"] body .top-bar {
  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-scheme="dark"] body .btn-login,
html[data-scheme="dark"] body .btn-logout {
  border-color: rgba(255, 255, 255, 0.3);
}

html[data-scheme="dark"] body .btn-login:hover,
html[data-scheme="dark"] body .btn-logout:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}