/* سوق الخيرات — design tokens.
   Brand from the logo: gold (prices, main action) on deep navy, teal for accents and focus.
   Dark navy is the brand default; body[data-mode="light"] switches to a soft light theme with the same accents. */
:root{
  color-scheme:dark;
  --bg:#0A111D;
  --bg-2:#0D1524;
  --surface:#121C2E;
  --surface-2:#172338;
  --surface-3:#1E2C45;
  --line:rgba(200,215,250,.09);
  --line-2:rgba(200,215,250,.17);
  --hover:rgba(255,255,255,.05);
  --hover-2:rgba(255,255,255,.09);
  --ink:#EEF2F9;
  --muted:#A6B1C7;
  --dim:#8B96AE;
  --gold:#E3B15C;
  --gold-2:#F3CD86;
  --gold-ink:#231602;
  --gold-text:#EBC074;
  --gold-soft:rgba(227,177,92,.14);
  --teal:#35B7A8;
  --teal-text:#62D0C3;
  --teal-soft:rgba(53,183,168,.14);
  --ok:#4CC38A;
  --ok-soft:rgba(76,195,138,.14);
  --warn:#E9B04F;
  --warn-soft:rgba(233,176,79,.14);
  --bad:#EE8B83;
  --bad-soft:rgba(238,139,131,.14);
  --wa:#25D366;
  --wa-ink:#05260F;
  --tg:#2AABEE;
  --shadow-1:0 1px 2px rgba(0,0,0,.28),0 8px 22px -12px rgba(0,0,0,.55);
  --shadow-2:0 24px 60px -24px rgba(0,0,0,.75);
  --shadow-gold:0 10px 28px -12px rgba(227,177,92,.6);
  --glass:color-mix(in srgb,var(--surface) 74%,transparent);
  --backdrop:rgba(4,8,15,.52);
  --blur:16px;
  --f-head:"Noto Kufi Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --fs-xs:12px;
  --fs-sm:13.5px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:clamp(23px,5.4vw,32px);
  --fs-3xl:clamp(29px,7.6vw,52px);
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --pad:16px;
  --header-h:60px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s;
  --t:.28s;
  --t-slow:.5s;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  background:var(--bg);
}
body[data-mode="light"]{
  --glass:color-mix(in srgb,var(--surface) 74%,transparent);  /* recomputed from the light surface */
  color-scheme:light;
  --bg:#F5F6FA;
  --bg-2:#ECEFF5;
  --surface:#FFFFFF;
  --surface-2:#F3F5F9;
  --surface-3:#E8ECF3;
  --line:rgba(16,28,52,.10);
  --line-2:rgba(16,28,52,.18);
  --hover:rgba(16,28,52,.04);
  --hover-2:rgba(16,28,52,.075);
  --ink:#0F1B2E;
  --muted:#56627A;
  --dim:#667189;
  --gold-2:#EDC27A;
  --gold-text:#8E5F0E;
  --gold-soft:rgba(227,177,92,.2);
  --teal:#168677;
  --teal-text:#0F7466;
  --teal-soft:rgba(22,134,119,.10);
  --ok:#1E8A5A;
  --ok-soft:rgba(30,138,90,.10);
  --warn:#9A6206;
  --warn-soft:rgba(154,98,6,.10);
  --bad:#BF4038;
  --bad-soft:rgba(191,64,56,.09);
  --wa-ink:#04220D;
  --shadow-1:0 1px 2px rgba(15,27,46,.06),0 8px 22px -12px rgba(15,27,46,.22);
  --shadow-2:0 26px 60px -26px rgba(15,27,46,.38);
  --shadow-gold:0 10px 26px -12px rgba(190,135,40,.55);
  --backdrop:rgba(15,27,46,.32);
}
:root:has(body[data-mode="light"]){background:#F5F6FA;color-scheme:light}