/* ============================================================
   Hadi Baroudi — Design Tokens
   المصدر الوحيد للألوان والخطوط والمقاسات. لا تكتب ألواناً حرفية في المكونات.
   ============================================================ */

/* الخطوط: ضع هذا الرابط في <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@500;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap">
*/

:root {
  /* ---- Color: light ---- */
  --bg: #F4F6F6;
  --surface: #FFFFFF;
  --tile: #E7EDEF;
  --ink: #16252C;
  --ink-soft: #4D5F67;
  --line: #D6DEE1;
  --teal: #2D6179;        /* لون العلامة */
  --teal-deep: #1F4A5E;   /* الهيدر والفوتر */
  --gold: #BF985D;        /* إبراز */
  --gold-ink: #8E6A33;    /* نص ذهبي على خلفية فاتحة */
  --on-teal: #FFFFFF;
  --on-gold: #1B2A30;
  --sale: #B4472F;
  --ok: #2F7D53;
  --scrim: rgba(8, 16, 20, .55);
  --shadow: 0 10px 30px rgba(22, 37, 44, .12);

  /* ---- Type ---- */
  --f-display: "Reem Kufi", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --f-body: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif;
  --fs-hero: clamp(34px, 6.4vw, 64px);
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-brand: 18px;
  --fs-price: 16px;
  --fs-body: 15px;
  --fs-small: 13.5px;
  --fs-hint: 12.5px;
  --fs-micro: 10px;
  --lh-body: 1.6;
  --lh-head: 1.15;

  /* ---- Radius ---- */
  --r-pill: 999px;
  --r-sheet: 18px;
  --r-card: 14px;
  --r-control: 10px;
  --r-mini: 8px;

  /* ---- Space ---- */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 10px; --s-5: 12px;
  --s-6: 14px; --s-7: 16px; --s-8: 20px; --s-9: 24px; --s-10: 28px; --s-11: 36px;

  /* ---- Layout ---- */
  --max-w: 1180px;
  --gutter: 16px;
  --header-logo: 42px;
  --control-h: 40px;
  --swatch: 34px;
  --size-btn: 46px;

  /* ---- Motion ---- */
  --t-fast: .2s ease;
  --t-sheet: .28s ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D171C;
    --surface: #14232A;
    --tile: #1B2F38;
    --ink: #EAF0F2;
    --ink-soft: #9DB0B8;
    --line: #253C46;
    --teal: #2D6179;
    --teal-deep: #173A4A;
    --gold: #CFAA70;
    --gold-ink: #D9B87F;
    --sale: #E07A5F;
    --ok: #5DBB8A;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D171C;
  --surface: #14232A;
  --tile: #1B2F38;
  --ink: #EAF0F2;
  --ink-soft: #9DB0B8;
  --line: #253C46;
  --teal: #2D6179;
  --teal-deep: #173A4A;
  --gold: #CFAA70;
  --gold-ink: #D9B87F;
  --sale: #E07A5F;
  --ok: #5DBB8A;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---- Breakpoints (للمرجع، CSS لا يدعم متغيرات داخل @media) ----
   mobile  : max-width 720px   → شبكة عمودين، Bottom Sheet، يختفي المونوغرام
   tablet  : 721px – 900px     → 3 أعمدة
   desktop : > 900px           → 4 أعمدة
*/

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
h1, h2, h3 { font-family: var(--f-display); line-height: var(--lh-head); text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Reference component values; single source of truth. */
:root {
--ref-1:15px;
--ref-2:0px;
--ref-3:1180px;
--ref-4:16px;
--ref-5:2px;
--ref-6:12px;
--ref-7:10px;
--ref-8:42px;
--ref-9:18px;
--ref-10:6px;
--ref-11:rgba(255,255,255,.08);
--ref-12:1px;
--ref-13:rgba(255,255,255,.18);
--ref-14:999px;
--ref-15:8px;
--ref-16:rgba(255,255,255,.16);
--ref-17:20px;
--ref-18:#1B2A30;
--ref-19:5px;
--ref-20:#22303A;
--ref-21:12.5px;
--ref-22:24px;
--ref-23:36px;
--ref-24:34px;
--ref-25:64px;
--ref-26:rgba(255,255,255,.35);
--ref-27:300px;
--ref-28:rgba(255,255,255,.2);
--ref-29:-4px;
--ref-30:11px;
--ref-31:rgba(255,255,255,.7);
--ref-32:28px;
--ref-33:14px;
--ref-34:26px;
--ref-35:4px;
--ref-36:7px;
--ref-37:9px;
--ref-38:220px;
--ref-39:-2px;
--ref-40:11.5px;
--ref-41:3px;
--ref-42:#fff;
--ref-43:13px;
--ref-44:40px;
--ref-45:14.5px;
--ref-46:13.5px;
--ref-47:rgba(255,255,255,.8);
--ref-48:22px;
--ref-49:rgba(8,16,20,.55);
--ref-50:860px;
--ref-51:32px;
--ref-52:46px;
--ref-53:420px;
--ref-54:76px;
--ref-55:17px;
--ref-56:900px;
--ref-57:720px;
--ref-58:1100px;
--ref-59:38px;
--ref-60:100px;
--ref-61:180px;
--ref-62:56px;
--ref-63:68px;
--ref-64:110px;
--ref-65:30px;
--ref-66:19px;
--ref-67:rgba(255,255,255,.12);
--ref-68:44px;
--ref-69:72px;
--ref-70:90px;
--ref-71:rgba(0,0,0,.6);
--ref-72:1.5px;
--ref-73:23px;
--ref-74:200px;
--ref-75:84px;
--ref-76:760px;
--ref-77:140px;
--ref-78:96px;
}
:root{--max-login:420px;--thumb-size:64px;--warn:var(--gold-ink)}