/* Semantic color and spacing system. Product imagery is never recolored. */
:root {
  --bg:#F6F8FC; --surface:#FFFFFF; --elevated:#EEF2F8; --hover:#EEF2F8;
  --fg:#172033; --secondary:#58677D; --muted:var(--secondary);
  --border:#D9E0EA; --border-subtle:#E4E9F1; --border-control:#8190A6;
  --primary:#1D4ED8; --primary-fg:#FFFFFF; --primary-hover:#1E40AF; --primary-active:#1E3A8A;
  --accent:#E8EFFE; --accent-fg:#1E40AF;
  --danger:#B42336; --danger-surface:#FFF0F2;
  --success:#167344; --success-surface:#ECFDF3;
  --warning:#8B5700; --warning-surface:#FFF7E8;
  --favorite:#BD345C; --favorite-surface:#FFF0F4;
  --focus:var(--primary); --focus-ring:var(--focus);
  --message-own:var(--accent); --message-own-fg:var(--fg); --message-other:var(--surface);
  --image-surface:#FFFFFF; --image-fg:#172033;
  --toast-bg:#172033; --toast-fg:#FFFFFF;
  --blue:var(--primary); --blue-fg:var(--primary-fg);
  --scrim:rgba(11,20,36,.48);
  --softshadow:0 8px 24px rgba(23,32,51,.08);
  --nav-shadow:0 -2px 12px rgba(23,32,51,.04);
  --shadow-card:0 2px 8px rgba(23,32,51,.025); --shadow-dialog:var(--softshadow);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:20px; --text-xl:28px;
  --hero-surface:#EDF2FC; --hero-border:#D8E3F7;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --duration-press:80ms; --duration-control:120ms;
  --duration-capsule:180ms; --duration-route:140ms; --duration-sheet:220ms;
  --header:76px; --bottom:88px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --font-ar:"ChatShop Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#101722; --surface:#182235; --elevated:#223049; --hover:#223049;
  --fg:#F2F5FA; --secondary:#A8B5C8; --muted:var(--secondary);
  --border:#33435D; --border-subtle:#2A3850; --border-control:#6F819C;
  --hero-surface:#1B2B45; --hero-border:#314668;
  --primary:#7CA5FF; --primary-fg:#0B1424; --primary-hover:#99B9FF; --primary-active:#B2CAFF;
  --accent:#253B64; --accent-fg:#ADC7FF;
  --danger:#FF9DAB; --danger-surface:#3D2431;
  --success:#82D6A4; --success-surface:#19382D;
  --warning:#FFD084; --warning-surface:#392D16;
  --favorite:#FF9FBA; --favorite-surface:#3C2337;
  --toast-bg:#E6EDFA; --toast-fg:#101722;
  --scrim:rgba(5,10,19,.68);
  --softshadow:0 8px 24px rgba(0,0,0,.20);
  --nav-shadow:0 -2px 12px rgba(0,0,0,.12);
  --shadow-card:0 2px 8px rgba(0,0,0,.10);
  color-scheme:dark;
}
:root[lang="ar"] { --font:var(--font-ar); }