/* ============================================
   Mbham — نظام الألوان (Light / Dark)
   يُحمَّل قبل main.css
   ============================================ */

:root {
  /* هوية ثابتة */
  --primary: #F7C028;
  --gold-deep: #b8860b;
  --gold-mid: #f7c028;
  --gold-light: #fff0b3;
  --gold-highlight: #fff8dc;
  --gold-gradient: linear-gradient(
    105deg,
    var(--gold-deep) 0%,
    var(--gold-mid) 28%,
    var(--gold-light) 48%,
    var(--gold-highlight) 58%,
    var(--gold-mid) 72%,
    var(--gold-deep) 100%
  );
  --gold-gradient-shine: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--gold-highlight) 85%, transparent) 45%,
    transparent 90%
  );
  /* أصفر مموج — هوية primary فقط بدون ذهبي */
  --yellow-wave: linear-gradient(
    100deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 55%, var(--white)) 22%,
    var(--primary) 44%,
    color-mix(in srgb, var(--primary) 40%, var(--white)) 66%,
    var(--primary) 88%,
    color-mix(in srgb, var(--primary) 50%, var(--white)) 100%
  );
  --secondary: #266E62;
  --secondary-deep: #1a5249;
  --brand-dark: #1A1A1A;
  --white: #ffffff;
  --gray: #969899;
  --whatsapp: #25D366;

  --radius: 16px;
  --radius-sm: 8px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 80px;
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Cairo', sans-serif;
}

/* ---- الوضع الفاتح ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --bg-card: #ffffff;
  --text: #1a1a1a;
  --text-muted: #5f6975;
  --text-on-primary: #1a1a1a;
  --text-on-hero: #ffffff;

  --border: color-mix(in srgb, var(--text) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 16%, transparent);

  --shadow: 0 8px 30px color-mix(in srgb, var(--brand-dark) 8%, transparent);
  --shadow-lg: 0 24px 64px color-mix(in srgb, var(--brand-dark) 14%, transparent);

  --header-scrolled-bg: color-mix(in srgb, var(--bg) 96%, transparent);
  --header-link: var(--text);
  --header-link-hero: var(--primary);
  --theme-toggle-bg: color-mix(in srgb, var(--white) 14%, transparent);
  --theme-toggle-bg-scrolled: var(--bg-card);
  --nav-backdrop: color-mix(in srgb, var(--brand-dark) 50%, transparent);
  --nav-mobile-bg: var(--bg);

  --surface-loader: var(--brand-dark);
  --surface-footer: #14171c;

  --input-bg: var(--bg-alt);
  --focus-ring: color-mix(in srgb, var(--secondary) 18%, transparent);

  --icon-tint: color-mix(in srgb, var(--secondary) 12%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 28%, transparent);
  --secondary-overlay: color-mix(in srgb, var(--secondary) 60%, transparent);

  --success-bg: color-mix(in srgb, var(--secondary) 12%, transparent);
  --success-text: var(--secondary);
  --success-border: color-mix(in srgb, var(--secondary) 35%, transparent);
  --danger-bg: color-mix(in srgb, #dc3545 10%, transparent);
  --danger-text: #c7374a;
  --danger-border: color-mix(in srgb, #c7374a 35%, transparent);

  /* خلفية أقسام بديلة (تتبع الثيم) */
  --section-alt-bg: var(--bg-alt);
  --section-ring: var(--bg-alt);

  /* أسطح عكسية (هيرو، فوتر، تراكبات فقط) */
  --surface-inverse: #1a1a1a;
  --surface-inverse-elevated: #222528;
  --text-on-inverse: #ffffff;
  --text-muted-on-inverse: color-mix(in srgb, var(--white) 78%, transparent);
  --text-soft-on-inverse: color-mix(in srgb, var(--white) 64%, transparent);
  --border-on-inverse: color-mix(in srgb, var(--white) 12%, transparent);
  --surface-on-inverse: color-mix(in srgb, var(--white) 6%, transparent);
  --surface-on-inverse-hover: color-mix(in srgb, var(--white) 10%, transparent);

  /* أقسام الهوية الخضراء */
  --surface-brand: #246a5e;
  --surface-brand-end: var(--secondary-deep);
  --clients-logo-bg: #ffffff;
  --clients-glass: color-mix(in srgb, var(--white) 14%, transparent);
  --clients-glass-hover: color-mix(in srgb, var(--white) 18%, transparent);

  --hero-media-bg: var(--surface-inverse);
  --hero-gradient-end: #ffffff;
  --overlay-on-image: color-mix(in srgb, var(--white) 12%, transparent);
  --overlay-media: color-mix(in srgb, var(--brand-dark) 92%, transparent);
  --overlay-media-accent: color-mix(in srgb, var(--secondary) 40%, transparent);

  --modal-backdrop: color-mix(in srgb, var(--brand-dark) 75%, transparent);
  --overlay-strong: color-mix(in srgb, #000000 92%, transparent);
  --overlay-stronger: color-mix(in srgb, #000000 94%, transparent);
  --mask-fade: #000000;

  --whatsapp-shadow: color-mix(in srgb, var(--whatsapp) 45%, transparent);
  --panel-index-dim: color-mix(in srgb, var(--primary) 22%, transparent);
  --ambient-secondary: color-mix(in srgb, var(--secondary) 9%, transparent);
  --ambient-primary: color-mix(in srgb, var(--primary) 8%, transparent);
  --why-us-ambient-1: color-mix(in srgb, var(--secondary) 30%, transparent);
  --why-us-ambient-2: color-mix(in srgb, var(--primary) 15%, transparent);

  --primary-glow: color-mix(in srgb, var(--primary) 35%, transparent);
  --outline-on-hero: color-mix(in srgb, var(--white) 50%, transparent);
  --hero-text-shadow: color-mix(in srgb, #000000 45%, transparent);
  --hero-divider: color-mix(in srgb, var(--white) 50%, transparent);

  --glass-1: color-mix(in srgb, var(--white) 14%, transparent);
  --glass-2: color-mix(in srgb, var(--white) 6%, transparent);
  --glass-3: color-mix(in srgb, var(--white) 10%, transparent);
  --glass-hover-1: color-mix(in srgb, var(--white) 18%, transparent);
  --glass-hover-2: color-mix(in srgb, var(--white) 8%, transparent);
  --glass-hover-3: color-mix(in srgb, var(--white) 14%, transparent);

  --project-overlay-start: color-mix(in srgb, var(--surface-inverse) 95%, transparent);
  --project-overlay-mid: color-mix(in srgb, var(--secondary) 40%, transparent);
  --text-on-overlay-muted: color-mix(in srgb, var(--white) 75%, transparent);

  --shadow-card-hover: 0 10px 28px color-mix(in srgb, var(--brand-dark) 14%, transparent);
  --shadow-media-hover: 0 14px 32px color-mix(in srgb, #000000 32%, transparent);
  --shadow-media-active: 0 8px 20px color-mix(in srgb, #000000 28%, transparent);
  --shadow-icon: 0 10px 28px color-mix(in srgb, var(--secondary) 28%, transparent);
  --icon-inset: color-mix(in srgb, var(--white) 12%, transparent);

  /* توافق مع الأسماء القديمة */
  --dark: var(--brand-dark);
  --dark-section-bg: var(--surface-inverse);
  --dark-surface: var(--surface-on-inverse);
  --dark-surface-hover: var(--surface-on-inverse-hover);
  --dark-border: var(--border-on-inverse);
  --dark-text: var(--text-on-inverse);
  --dark-text-muted: var(--text-muted-on-inverse);
  --dark-text-soft: var(--text-soft-on-inverse);
  --clients-bg: var(--surface-brand);
  --clients-text: #ffffff;
  --clients-text-muted: color-mix(in srgb, var(--white) 78%, transparent);
  --meta-theme-color: #266E62;

  --footer-text: #f5f7f8;
  --footer-text-muted: color-mix(in srgb, var(--white) 70%, transparent);
  --footer-border: color-mix(in srgb, var(--white) 12%, transparent);
  --footer-chip-bg: color-mix(in srgb, var(--white) 10%, transparent);
}

/* ---- الوضع الداكن ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111214;
  --bg-alt: #181a1d;
  --bg-card: #202327;
  --text: #f5f7f8;
  --text-muted: #b3bac2;
  --text-on-primary: #1a1a1a;
  --text-on-hero: #ffffff;

  --border: color-mix(in srgb, var(--white) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--white) 18%, transparent);

  --shadow: 0 10px 34px color-mix(in srgb, #000000 36%, transparent);
  --shadow-lg: 0 28px 80px color-mix(in srgb, #000000 56%, transparent);

  --header-scrolled-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --header-link: color-mix(in srgb, var(--white) 92%, transparent);
  --header-link-hero: var(--primary);
  --theme-toggle-bg: color-mix(in srgb, var(--white) 8%, transparent);
  --theme-toggle-bg-scrolled: var(--bg-card);
  --nav-backdrop: color-mix(in srgb, #000000 65%, transparent);
  --nav-mobile-bg: var(--bg-card);

  --surface-loader: #101214;
  --surface-footer: #0c0e10;

  --input-bg: #171a1d;
  --focus-ring: color-mix(in srgb, var(--secondary) 28%, transparent);

  --icon-tint: color-mix(in srgb, var(--secondary) 24%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 32%, transparent);
  --secondary-overlay: color-mix(in srgb, var(--secondary) 55%, transparent);

  --success-bg: color-mix(in srgb, var(--secondary) 22%, transparent);
  --success-text: #7ed6b5;
  --success-border: color-mix(in srgb, var(--secondary) 58%, transparent);
  --danger-bg: color-mix(in srgb, #dc3545 18%, transparent);
  --danger-text: #f08b94;
  --danger-border: color-mix(in srgb, #dc3545 50%, transparent);

  --section-alt-bg: var(--bg-alt);
  --section-ring: var(--bg-alt);

  --surface-inverse: #161a1f;
  --surface-inverse-elevated: #1c2128;
  --text-on-inverse: #f5f7f8;
  --text-muted-on-inverse: color-mix(in srgb, var(--white) 80%, transparent);
  --text-soft-on-inverse: color-mix(in srgb, var(--white) 68%, transparent);
  --border-on-inverse: color-mix(in srgb, var(--white) 14%, transparent);
  --surface-on-inverse: color-mix(in srgb, var(--white) 8%, transparent);
  --surface-on-inverse-hover: color-mix(in srgb, var(--white) 12%, transparent);

  --surface-brand: #1a5249;
  --surface-brand-end: #123d37;
  --clients-logo-bg: #f0f2f4;
  --clients-glass: color-mix(in srgb, var(--white) 10%, transparent);
  --clients-glass-hover: color-mix(in srgb, var(--white) 14%, transparent);

  --hero-media-bg: #0a0c0e;
  --hero-gradient-end: #e8e8e8;
  --overlay-on-image: color-mix(in srgb, var(--white) 8%, transparent);
  --overlay-media: color-mix(in srgb, #000000 94%, transparent);
  --overlay-media-accent: color-mix(in srgb, var(--secondary) 45%, transparent);

  --modal-backdrop: color-mix(in srgb, #000000 82%, transparent);
  --overlay-strong: color-mix(in srgb, #000000 92%, transparent);
  --overlay-stronger: color-mix(in srgb, #000000 95%, transparent);

  --whatsapp-shadow: color-mix(in srgb, var(--whatsapp) 38%, transparent);
  --panel-index-dim: color-mix(in srgb, var(--primary) 18%, transparent);
  --ambient-secondary: color-mix(in srgb, var(--secondary) 14%, transparent);
  --ambient-primary: color-mix(in srgb, var(--primary) 10%, transparent);
  --why-us-ambient-1: color-mix(in srgb, var(--secondary) 38%, transparent);
  --why-us-ambient-2: color-mix(in srgb, var(--primary) 18%, transparent);

  --primary-glow: color-mix(in srgb, var(--primary) 32%, transparent);
  --outline-on-hero: color-mix(in srgb, var(--white) 42%, transparent);
  --hero-text-shadow: color-mix(in srgb, #000000 55%, transparent);
  --hero-divider: color-mix(in srgb, var(--white) 42%, transparent);

  --glass-1: color-mix(in srgb, var(--white) 12%, transparent);
  --glass-2: color-mix(in srgb, var(--white) 5%, transparent);
  --glass-3: color-mix(in srgb, var(--white) 8%, transparent);
  --glass-hover-1: color-mix(in srgb, var(--white) 16%, transparent);
  --glass-hover-2: color-mix(in srgb, var(--white) 7%, transparent);
  --glass-hover-3: color-mix(in srgb, var(--white) 12%, transparent);

  --project-overlay-start: color-mix(in srgb, #000000 92%, transparent);
  --project-overlay-mid: color-mix(in srgb, var(--secondary) 45%, transparent);
  --text-on-overlay-muted: color-mix(in srgb, var(--white) 72%, transparent);

  --shadow-card-hover: 0 10px 28px color-mix(in srgb, #000000 28%, transparent);
  --shadow-media-hover: 0 14px 32px color-mix(in srgb, #000000 40%, transparent);
  --shadow-media-active: 0 8px 20px color-mix(in srgb, #000000 32%, transparent);
  --shadow-icon: 0 10px 28px color-mix(in srgb, var(--secondary) 32%, transparent);
  --icon-inset: color-mix(in srgb, var(--white) 10%, transparent);

  --dark-section-bg: var(--surface-inverse);
  --dark-surface: var(--surface-on-inverse);
  --dark-surface-hover: var(--surface-on-inverse-hover);
  --dark-border: var(--border-on-inverse);
  --dark-text: var(--text-on-inverse);
  --dark-text-muted: var(--text-muted-on-inverse);
  --dark-text-soft: var(--text-soft-on-inverse);
  --clients-bg: var(--surface-brand);
  --clients-text: #f5f7f8;
  --clients-text-muted: color-mix(in srgb, var(--white) 80%, transparent);
  --meta-theme-color: #111214;

  --footer-text: #f5f7f8;
  --footer-text-muted: color-mix(in srgb, var(--white) 68%, transparent);
  --footer-border: color-mix(in srgb, var(--white) 14%, transparent);
  --footer-chip-bg: color-mix(in srgb, var(--white) 12%, transparent);
}

/* تطبيق أساسي */
html {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color var(--transition), color var(--transition);
}

body,
.section {
  background-color: transparent;
  color: var(--text);
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input,
select,
textarea {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

select option {
  background-color: var(--bg-card);
  color: var(--text);
}