/* =========================================================================
   Wedd (ود) design tokens. SOURCE OF TRUTH.
   tokens.json and tailwind.theme.js mirror this file; change here first.

   Layers
   1. Primitives  (--wd-<palette>-<step>)  raw colours. Never used in components.
   2. Semantic    (--wd-<role>)            what components use. Themed.
   3. Scales      type, space, radius, elevation, motion, layout.

   Theming
   - Light is the default.
   - Dark follows the OS (prefers-color-scheme) unless the page sets
     <html data-theme="light"> or <html data-theme="dark">.
   ========================================================================= */

:root {
  /* ---------- 1. Primitives ---------- */

  /* Kohl (كحل): deep indigo ink. The brand colour. */
  --wd-kohl-950: #0E0F24;
  --wd-kohl-900: #12132B;   /* dark background ("Leil") */
  --wd-kohl-850: #1C1E3E;   /* dark surface */
  --wd-kohl-800: #262952;   /* dark raised surface */
  --wd-kohl-750: #34376A;   /* dark border */
  --wd-kohl-700: #1F2160;   /* BRAND: primary action, text, logo */
  --wd-kohl-600: #2C2F86;   /* primary hover/pressed on light */
  --wd-kohl-500: #3D46C9;   /* links, focus ring on light */
  --wd-kohl-450: #7E80A0;   /* input borders on light (3.8:1 on white) */
  --wd-kohl-400: #5A5C80;   /* muted text on light */
  --wd-kohl-350: #7478AA;   /* input borders on dark (3.8:1 on dark surface) */
  --wd-kohl-300: #9EA6FF;   /* links, focus ring on dark */
  --wd-kohl-250: #A3A6C9;   /* muted text on dark */
  --wd-kohl-200: #DCDDEC;   /* borders on light */
  --wd-kohl-100: #EEEFF7;   /* sunken surface on light */
  --wd-kohl-50:  #F7F7FB;   /* Sukkar (سكر): light background */
  --wd-white:    #FFFFFF;

  /* Fozdo' (فزدق): pistachio. The bead. Accent fill, never text on light. */
  --wd-fozdo-300: #CBE6A6;
  --wd-fozdo-400: #B5DA86;  /* dark-theme primary action */
  --wd-fozdo-500: #A9CF73;  /* BRAND accent: bead, highlights, selected fills */
  --wd-fozdo-800: #4A6B1F;  /* pistachio as text on light (5.8:1) */
  --wd-fozdo-900: #2D4212;

  /* Mlabbes (ملبّس): sugared-almond pastels for occasions. Fills only. */
  --wd-mlabbes-lilac:  #E6E1FA;
  --wd-mlabbes-mint:   #D7F0E2;
  --wd-mlabbes-peach:  #FDE4D4;
  --wd-mlabbes-butter: #FAF0C8;
  --wd-mlabbes-lilac-dk:  #2E2A55;
  --wd-mlabbes-mint-dk:   #1D3A33;
  --wd-mlabbes-peach-dk:  #3D2A2A;
  --wd-mlabbes-butter-dk: #393620;

  /* Status */
  --wd-gargeer-700: #1A7044;  --wd-gargeer-300: #7BCF9E;  /* success (جرجير) */
  --wd-gargeer-100: #E3F4EA;  --wd-gargeer-950: #163A2B;
  --wd-mishmish-700: #985200; --wd-mishmish-300: #FFB86B; /* warning (مشمش) */
  --wd-mishmish-100: #FDEBD3; --wd-mishmish-950: #3B2A14;
  --wd-romman-700: #C0283D;   --wd-romman-300: #FF8A96;   /* danger (رمان) */
  --wd-romman-100: #FBE3E6;   --wd-romman-950: #3E1A26;

  /* ---------- 2. Semantic (light) ---------- */
  --wd-bg:            var(--wd-kohl-50);
  --wd-surface:       var(--wd-white);
  --wd-surface-sunken:var(--wd-kohl-100);
  --wd-surface-inverse:var(--wd-kohl-700);
  --wd-text:          var(--wd-kohl-700);
  --wd-text-muted:    var(--wd-kohl-400);
  --wd-text-inverse:  var(--wd-kohl-50);
  --wd-border:        var(--wd-kohl-200);
  --wd-border-strong: var(--wd-kohl-400);
  --wd-border-input:  var(--wd-kohl-450);  /* form controls: >= 3:1 against surface and bg */
  --wd-disabled-bg:   var(--wd-kohl-100);
  --wd-disabled-text: var(--wd-kohl-400);
  --wd-skeleton:      var(--wd-kohl-100);

  --wd-primary:        var(--wd-kohl-700);
  --wd-primary-hover:  var(--wd-kohl-600);
  --wd-on-primary:     var(--wd-white);
  --wd-on-danger:      var(--wd-white);
  --wd-accent:         var(--wd-fozdo-500);
  --wd-on-accent:      var(--wd-kohl-700);
  --wd-accent-text:    var(--wd-fozdo-800);
  --wd-link:           var(--wd-kohl-500);
  --wd-focus:          var(--wd-kohl-500);

  --wd-success:    var(--wd-gargeer-700);  --wd-success-bg: var(--wd-gargeer-100);
  --wd-warning:    var(--wd-mishmish-700); --wd-warning-bg: var(--wd-mishmish-100);
  --wd-danger:     var(--wd-romman-700);   --wd-danger-bg:  var(--wd-romman-100);
  --wd-info:       var(--wd-kohl-500);     --wd-info-bg:    var(--wd-mlabbes-lilac);

  --wd-occasion-lilac:  var(--wd-mlabbes-lilac);
  --wd-occasion-mint:   var(--wd-mlabbes-mint);
  --wd-occasion-peach:  var(--wd-mlabbes-peach);
  --wd-occasion-butter: var(--wd-mlabbes-butter);
  --wd-on-occasion:     var(--wd-kohl-700);

  --wd-scrim: rgb(18 19 43 / 0.48);
  --wd-shadow-rgb: 31 33 96;

  /* ---------- 3. Type ---------- */
  /* UI: IBM Plex Sans Arabic (Arabic + Latin; Western digits are tabular by default).
     Display: Aref Ruqaa (Ruqaa, the everyday Egyptian handwriting). Headlines and notes only. */
  --wd-font-ui: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --wd-font-display: "Aref Ruqaa", "IBM Plex Sans Arabic", serif;
  --wd-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* back-office IDs only */

  --wd-weight-regular: 400;
  --wd-weight-medium: 500;
  --wd-weight-bold: 700;

  /* Scale: 1.2 ratio from 16px. Mobile values; desktop bumps display sizes via --wd-text-display-*. */
  --wd-text-xs:   0.75rem;   /* 12  legal, timestamps */
  --wd-text-sm:   0.875rem;  /* 14  secondary, chips */
  --wd-text-md:   1rem;      /* 16  body, inputs (never smaller on inputs: iOS zoom) */
  --wd-text-lg:   1.125rem;  /* 18  card titles, prices */
  --wd-text-xl:   1.375rem;  /* 22  section titles */
  --wd-text-2xl:  1.75rem;   /* 28  page titles */
  --wd-text-3xl:  2.25rem;   /* 36  display */
  --wd-text-4xl:  clamp(2.5rem, 6vw + 1rem, 4.5rem); /* hero */

  /* Line height per step. Arabic needs more room than Latin (dots, tall alef/lam, deep descenders). */
  --wd-lh-ar-xs: 1.7;   --wd-lh-en-xs: 1.5;
  --wd-lh-ar-sm: 1.7;   --wd-lh-en-sm: 1.5;
  --wd-lh-ar-md: 1.75;  --wd-lh-en-md: 1.5;
  --wd-lh-ar-lg: 1.6;   --wd-lh-en-lg: 1.45;
  --wd-lh-ar-xl: 1.5;   --wd-lh-en-xl: 1.35;
  --wd-lh-ar-2xl: 1.45; --wd-lh-en-2xl: 1.3;
  --wd-lh-ar-3xl: 1.4;  --wd-lh-en-3xl: 1.2;
  --wd-lh-ar-4xl: 1.3;  --wd-lh-en-4xl: 1.1;
  /* Generic values kept for compatibility */
  --wd-leading-tight: 1.25;
  --wd-leading-ar-tight: 1.45;
  --wd-leading-body: 1.5;
  --wd-leading-ar-body: 1.75;
  --wd-measure: 66ch;      /* Latin running text */
  --wd-measure-ar: 34em;   /* Arabic running text (about 55-65 characters) */

  /* ---------- 4. Space (4px base) ---------- */
  --wd-space-0: 0;
  --wd-space-1: 0.25rem;  /* 4 */
  --wd-space-2: 0.5rem;   /* 8 */
  --wd-space-3: 0.75rem;  /* 12 */
  --wd-space-4: 1rem;     /* 16  phone gutter */
  --wd-space-5: 1.25rem;  /* 20 */
  --wd-space-6: 1.5rem;   /* 24 */
  --wd-space-8: 2rem;     /* 32 */
  --wd-space-10: 2.5rem;  /* 40 */
  --wd-space-12: 3rem;    /* 48 */
  --wd-space-16: 4rem;    /* 64 */
  --wd-space-20: 5rem;    /* 80 */
  --wd-space-24: 6rem;    /* 96  section rhythm, desktop */
  --wd-tap-min: 44px;     /* minimum touch target */
  --wd-tap-primary: 48px; /* primary buttons, OTP cells */
  /* Control heights: one height per size so buttons and fields line up in a row */
  --wd-control-lg: 48px;  /* default on phones: buttons, inputs, selects */
  --wd-control-md: 40px;  /* dense desktop (merchant tables, back-office); hit area padded to 44 */
  --wd-control-sm: 32px;  /* back-office tables only; hit area padded to 44 */
  --wd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wd-focus) 35%, transparent);

  /* ---------- 5. Radius (hierarchy, not one value for everything) ---------- */
  --wd-radius-xs: 6px;       /* checkboxes, small tags */
  --wd-radius-sm: 8px;       /* thumbnails, inline badges */
  --wd-radius-control: 12px; /* buttons, inputs, selects, OTP cells, toasts: one family so forms line up */
  --wd-radius-md: 16px;      /* cards, product photos, upload tiles */
  --wd-radius-lg: 24px;      /* bottom sheets, dialogs (top corners only on sheets) */
  --wd-radius-pill: 999px;   /* chips, status, the bead, switches */

  /* ---------- 6. Elevation (tinted with kohl, never grey) ---------- */
  --wd-elev-0: none;
  --wd-elev-1: 0 1px 2px rgb(var(--wd-shadow-rgb) / 0.08), 0 1px 1px rgb(var(--wd-shadow-rgb) / 0.04);
  --wd-elev-2: 0 6px 16px -4px rgb(var(--wd-shadow-rgb) / 0.14), 0 2px 4px rgb(var(--wd-shadow-rgb) / 0.06);
  --wd-elev-3: 0 18px 40px -12px rgb(var(--wd-shadow-rgb) / 0.28), 0 4px 8px rgb(var(--wd-shadow-rgb) / 0.08);

  /* ---------- 7. Motion ---------- */
  --wd-dur-instant: 80ms;   /* press states */
  --wd-dur-fast: 140ms;     /* hovers, chips */
  --wd-dur-base: 220ms;     /* sheets, toasts */
  --wd-dur-slow: 360ms;     /* page-level */
  --wd-dur-draw: 900ms;     /* the thread drawing (brand moment only) */
  --wd-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --wd-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --wd-ease-tie: cubic-bezier(0.34, 1.4, 0.64, 1); /* slight overshoot: a knot pulled tight */

  /* ---------- 8. Layout ---------- */
  --wd-gutter: var(--wd-space-4);
  --wd-container-consumer: 40rem;  /* consumer PWA content column */
  --wd-container-portal: 80rem;    /* merchant portal and back-office */
  --wd-z-sticky: 10;
  --wd-z-sheet: 40;
  --wd-z-toast: 50;
}

/* ---------- Dark theme: OS preference, unless forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wd-bg: var(--wd-kohl-900);
    --wd-surface: var(--wd-kohl-850);
    --wd-surface-sunken: var(--wd-kohl-950);
    --wd-surface-inverse: var(--wd-kohl-50);
    --wd-text: #EDEEF8;
    --wd-text-muted: var(--wd-kohl-250);
    --wd-text-inverse: var(--wd-kohl-700);
    --wd-border: var(--wd-kohl-750);
    --wd-border-strong: var(--wd-kohl-250);
    --wd-border-input: var(--wd-kohl-350);
    --wd-disabled-bg: var(--wd-kohl-800);
    --wd-disabled-text: var(--wd-kohl-250);
    --wd-skeleton: var(--wd-kohl-800);
    --wd-on-danger: var(--wd-kohl-900);
    --wd-primary: var(--wd-fozdo-400);
    --wd-primary-hover: var(--wd-fozdo-300);
    --wd-on-primary: var(--wd-kohl-900);
    --wd-accent: var(--wd-fozdo-400);
    --wd-on-accent: var(--wd-kohl-900);
    --wd-accent-text: var(--wd-fozdo-400);
    --wd-link: var(--wd-kohl-300);
    --wd-focus: var(--wd-kohl-300);
    --wd-success: var(--wd-gargeer-300);  --wd-success-bg: var(--wd-gargeer-950);
    --wd-warning: var(--wd-mishmish-300); --wd-warning-bg: var(--wd-mishmish-950);
    --wd-danger: var(--wd-romman-300);    --wd-danger-bg: var(--wd-romman-950);
    --wd-info: var(--wd-kohl-300);        --wd-info-bg: var(--wd-mlabbes-lilac-dk);
    --wd-occasion-lilac: var(--wd-mlabbes-lilac-dk);
    --wd-occasion-mint: var(--wd-mlabbes-mint-dk);
    --wd-occasion-peach: var(--wd-mlabbes-peach-dk);
    --wd-occasion-butter: var(--wd-mlabbes-butter-dk);
    --wd-on-occasion: #EDEEF8;
    --wd-scrim: rgb(5 6 18 / 0.64);
    --wd-shadow-rgb: 0 0 0;
    color-scheme: dark;
  }
}

/* ---------- Dark theme: forced by the page ---------- */
:root[data-theme="dark"] {
  --wd-bg: var(--wd-kohl-900);
  --wd-surface: var(--wd-kohl-850);
  --wd-surface-sunken: var(--wd-kohl-950);
  --wd-surface-inverse: var(--wd-kohl-50);
  --wd-text: #EDEEF8;
  --wd-text-muted: var(--wd-kohl-250);
  --wd-text-inverse: var(--wd-kohl-700);
  --wd-border: var(--wd-kohl-750);
  --wd-border-strong: var(--wd-kohl-250);
  --wd-border-input: var(--wd-kohl-350);
  --wd-disabled-bg: var(--wd-kohl-800);
  --wd-disabled-text: var(--wd-kohl-250);
  --wd-skeleton: var(--wd-kohl-800);
  --wd-on-danger: var(--wd-kohl-900);
  --wd-primary: var(--wd-fozdo-400);
  --wd-primary-hover: var(--wd-fozdo-300);
  --wd-on-primary: var(--wd-kohl-900);
  --wd-accent: var(--wd-fozdo-400);
  --wd-on-accent: var(--wd-kohl-900);
  --wd-accent-text: var(--wd-fozdo-400);
  --wd-link: var(--wd-kohl-300);
  --wd-focus: var(--wd-kohl-300);
  --wd-success: var(--wd-gargeer-300);  --wd-success-bg: var(--wd-gargeer-950);
  --wd-warning: var(--wd-mishmish-300); --wd-warning-bg: var(--wd-mishmish-950);
  --wd-danger: var(--wd-romman-300);    --wd-danger-bg: var(--wd-romman-950);
  --wd-info: var(--wd-kohl-300);        --wd-info-bg: var(--wd-mlabbes-lilac-dk);
  --wd-occasion-lilac: var(--wd-mlabbes-lilac-dk);
  --wd-occasion-mint: var(--wd-mlabbes-mint-dk);
  --wd-occasion-peach: var(--wd-mlabbes-peach-dk);
  --wd-occasion-butter: var(--wd-mlabbes-butter-dk);
  --wd-on-occasion: #EDEEF8;
  --wd-scrim: rgb(5 6 18 / 0.64);
  --wd-shadow-rgb: 0 0 0;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wd-dur-instant: 0ms;
    --wd-dur-fast: 0ms;
    --wd-dur-base: 0ms;
    --wd-dur-slow: 0ms;
    --wd-dur-draw: 0ms;
  }
}