/* ============================================================
   COLORS — primitive palette
   Wasla runs two surfaces that share one palette:
   · Storefront — warm, orange-led, re-skinnable per store
   · Admin      — cool, slate + blue, calm and data-first
   Primitives below are raw values; semantic aliases that map
   them to roles live in semantic.css.
   ============================================================ */

:root {
  /* ---- Orange — storefront brand default (stores override --brand) ---- */
  --orange-50:  #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;   /* brand */
  --orange-600: #ea6c10;   /* brand-dark / hover */
  --orange-700: #c2410c;
  --orange-800: #9a3412;

  /* ---- Slate — admin chrome (sidebar, cool text & borders) ---- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;    /* sidebar / secondary */
  --slate-900: #0f172a;

  /* ---- Gray — storefront neutrals (text, surfaces, borders) ---- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---- Blue — admin accent ---- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;     /* admin primary */
  --blue-700: #1d4ed8;

  /* ---- Semantic hues ---- */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  --amber-50:  #fffbeb;
  --amber-100: #fef9c3;
  --amber-500: #f59e0b;    /* rating stars */
  --amber-600: #d97706;
  --amber-700: #b45309;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* ---- Channel brand chips (multi-channel sync) ---- */
  --channel-jumia:    #f68b1e;
  --channel-noon:     #feee00;
  --channel-amazon:   #ff9900;
  --channel-whatsapp: #25d366;

  --white: #ffffff;
  --black: #000000;
}
/* ============================================================
   SEMANTIC ALIASES
   Role-based tokens that components reference. Two surfaces:
   STOREFRONT (warm) and ADMIN (cool). Stores re-skin by
   overriding the four --brand* knobs at the top — everything
   downstream follows.
   ============================================================ */

:root {
  /* ---- BRAND (storefront accent — per-store override point) ---- */
  --brand:        var(--orange-500);
  --brand-dark:   var(--orange-600);   /* hover / pressed */
  --brand-light:  var(--orange-50);    /* tints, soft backgrounds */
  --brand-rgb:    249, 115, 22;        /* @kind other */ /* for rgba() rings & overlays */
  --store-secondary: var(--slate-800); /* dark headings / footer */

  /* ---- ADMIN accent ---- */
  --admin-primary:        var(--blue-600);
  --admin-primary-hover:  var(--blue-700);
  --admin-sidebar:        var(--slate-800);
  --admin-sidebar-active: rgba(59,130,246,.14);
  --admin-sidebar-border: var(--blue-500);

  /* ---- TEXT (warm / storefront) ---- */
  --text-strong:  var(--gray-900);
  --text-body:    var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-subtle:  var(--gray-400);
  --text-inverse: var(--white);
  --text-link:    var(--brand);

  /* ---- TEXT (cool / admin) ---- */
  --text-strong-cool: var(--slate-900);
  --text-body-cool:   var(--slate-700);
  --text-muted-cool:  var(--slate-500);
  --text-on-dark:     var(--slate-100);
  --text-on-dark-dim: var(--slate-400);

  /* ---- SURFACES ---- */
  --surface-page:      var(--gray-50);    /* storefront body */
  --surface-page-cool: var(--slate-100);  /* admin body */
  --surface-card:      var(--white);
  --surface-sunken:    var(--gray-100);   /* inset wells, image bg */
  --surface-sunken-cool: var(--slate-50);
  --surface-dark:      var(--slate-900);  /* platform / AI panels */

  /* ---- BORDERS ---- */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-cool:   var(--slate-200);

  /* ---- STATE / SEMANTIC ---- */
  --success:    var(--green-600);
  --success-bg: var(--green-100);
  --success-fg: var(--green-700);

  --warning:    var(--amber-600);
  --warning-bg: var(--amber-100);
  --warning-fg: var(--amber-700);

  --danger:     var(--red-600);
  --danger-bg:  var(--red-100);
  --danger-fg:  var(--red-700);

  --info:       var(--blue-600);
  --info-bg:    var(--blue-50);

  --star:       var(--amber-500);

  /* ---- BOOTSTRAP 5 BRIDGE ----
     Maps Bootstrap's primary onto the active brand so utility
     classes (.btn-primary, .text-primary, links) stay on-brand. */
  --bs-primary:          var(--brand);
  --bs-primary-rgb:      var(--brand-rgb);
  --bs-link-color:       var(--brand);
  --bs-link-hover-color: var(--brand-dark);
}
/* ============================================================
   TYPOGRAPHY — font families, sizes, weights, rhythm
   · --font-brand — Cairo / Tajawal: bilingual AR (RTL) + LT.
     Used across the storefront and all customer-facing copy.
   · --font-ui    — Inter: dense admin & data screens (LTR).
   · --font-mono  — SKUs, codes, IDs, JSON.
   Type scale is rem-based and intentionally compact — Wasla is
   an operations tool first; large display sizes are rare.
   ============================================================ */

:root {
  --font-brand: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400;  /* @kind other */
  --fw-medium:   500;  /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold:     700;  /* @kind other */
  --fw-extrabold:800;  /* @kind other */

  /* Type scale (rem) */
  --text-xs:      0.72rem;   /* 11.5px — micro labels, badges */
  --text-sm:      0.82rem;   /* 13px   — secondary / table body */
  --text-base:    0.92rem;   /* 14.7px — storefront body */
  --text-md:      1rem;      /* 16px   — emphasis body */
  --text-lg:      1.1rem;    /* 17.6px — card titles */
  --text-xl:      1.3rem;    /* 20.8px — section heads */
  --text-2xl:     1.55rem;   /* 24.8px — product title */
  --text-3xl:     2rem;      /* 32px   — page hero */
  --text-display: 2.6rem;    /* 41.6px — landing display */

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter spacing */
  --tracking-tighter: -0.03em;  /* display / wordmark */
  --tracking-tight:   -0.02em;  /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.05em;   /* uppercase table heads */
  --tracking-caps:    0.09em;   /* sidebar section labels */
}
/* ============================================================
   SPACING, RADII & BORDERS
   4px base grid. Storefront favours softer, larger radii
   (cards 14px, pills 50px); admin is tighter (cards/inputs
   7–10px) for density.
   ============================================================ */

:root {
  /* Spacing scale — 4px grid */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Corner radii */
  --radius-xs:     5px;   /* badges */
  --radius-sm:     6px;   /* small chips, pagination */
  --radius-md:     8px;   /* buttons, inputs */
  --radius-lg:     10px;  /* admin cards, alerts */
  --radius-xl:     14px;  /* storefront cards, toasts */
  --radius-2xl:    16px;  /* product gallery, hero */
  --radius-pill:   50px;  /* category pills, search bar */
  --radius-circle: 50%;

  /* Borders */
  --border-width:       1px;
  --border-width-thick: 1.5px;

  /* Layout primitives (admin shell) */
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --topbar-height:     60px;
  --container-max:     1140px;
}
/* ============================================================
   ELEVATION — shadows & focus rings
   Wasla uses soft, low-spread shadows. Storefront cards lift on
   hover; admin cards stay flat with a faint two-layer shadow.
   Focus rings are coloured by surface (brand on store, blue on
   admin).
   ============================================================ */

:root {
  --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:   0 1px 6px rgba(0,0,0,.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);  /* admin cards */
  --shadow-md:   0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:   0 16px 36px rgba(0,0,0,.11);                            /* storefront card hover */
  --shadow-pop:  0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);  /* toasts, popovers */
  --shadow-sidebar: 4px 0 20px rgba(0,0,0,.12);

  /* Focus rings */
  --ring-brand: 0 0 0 3px rgba(249,115,22,.18);
  --ring-admin: 0 0 0 3px rgba(59,130,246,.12);

  /* Standard transitions */
  --ease: cubic-bezier(.4, 0, .2, 1);  /* @kind other */
  --transition-fast: .14s var(--ease);
  --transition:      .22s var(--ease);
}