/* ==========================================================================
   Design tokens — Alsafa Store · Commercial Intelligence Portal
   الصفا ستور · بوابة الذكاء التجاري

   Brand sourced from alsafastore.com (variables-red.css) and the SAFA logo:
     primary red  #DF1529   (--color-primary on their site)
     red hover    #FF2B2B
     ink          #1A1F24   (--color-default; the logo plate)
     slate        #485664
     muted slate  #8F9FAE

   Colour discipline (important, see docs/BRAND.md):
   · Safa Red is CHROME only — brand mark, active nav, primary action, focus ring.
   · Data semantics use their own scale: green = positive, amber = watch,
     crimson = negative. Crimson is darker and less saturated than Safa Red and
     never appears as a filled surface, so "brand red" and "bad number" never
     collide in the same visual role.
   · The categorical chart palette deliberately contains NO red, so red always
     means "attention" in a chart.
   ========================================================================== */

:root {
  /* --- Brand: Safa Red ---------------------------------------------------- */
  --brand-700: #a60f1f;
  --brand-600: #c41224;
  --brand-500: #df1529; /* primary */
  --brand-400: #ff2b2b; /* hover   */
  --brand-200: #f7b9bf;
  --brand-100: #fbdcdf;
  --brand-050: #fdeef0;

  /* --- Ink: the logo plate ------------------------------------------------ */
  --ink-900: #0e1216;
  --ink-800: #141a1f;
  --ink-700: #1a1f24; /* primary surface for chrome */
  --ink-600: #232a31;
  --ink-500: #2f3840;
  --ink-400: #485664; /* brand slate */
  --ink-300: #6b7a89;
  --ink-200: #8f9fae; /* brand muted slate */
  --ink-100: #c3ccd5;
  --ink-050: #eef1f4;

  /* --- Semantic state ----------------------------------------------------- */
  --pos-700: #0d5c36;
  --pos-600: #117a47;
  --pos-050: #e7f4ed;
  --warn-700: #8a5312;
  --warn-600: #d98324;
  --warn-050: #fdf3e6;
  --neg-700: #8f2018;
  --neg-600: #b3261e; /* data negative — darker/duller than Safa Red */
  --neg-050: #fcecea;
  --info-600: #485664;
  --info-050: #eef1f4;

  /* --- Surfaces & text ---------------------------------------------------- */
  --bg: #f4f6f8;
  --bg-sunken: #e9edf1;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-inset: #f7f9fa;
  --border: #e2e7ec;
  --border-strong: #ccd4dc;
  --text: #1a1f24;
  --text-2: #485664;
  --text-3: #76838f;
  --text-inverse: #ffffff;

  /* --- Data visualisation palette -----------------------------------------
     Assigned by series identity, never randomised per bar. No red.          */
  --series-1: #1a1f24; /* Actual              */
  --series-2: #8f9fae; /* Target (dashed)     */
  --series-3: #485664; /* Last year           */
  --series-4: #2e7d8f; /* teal               */
  --series-5: #b5842c; /* amber-gold         */
  --series-6: #4a6fa5; /* steel blue         */
  --series-7: #6b5b95; /* plum               */
  --series-8: #4f7a4a; /* moss               */
  --series-9: #a06a4a; /* clay               */
  --series-10: #7d8c99;
  --grid-line: #e8ecf0;
  --axis-text: #76838f;

  /* Sell-in vs sell-out are always these two, everywhere */
  --sellin: #1a1f24;
  --sellout: #2e7d8f;

  /* --- Typography ---------------------------------------------------------
     Poppins carries the brand (their site loads it); Inter carries the data. */
  --font-brand: "Poppins", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Inter",
    -apple-system, "Segoe UI", sans-serif;

  --fs-display: 1.75rem;
  --fs-h1: 1.375rem;
  --fs-h2: 1.0625rem;
  --fs-h3: 0.9375rem;
  --fs-body: 0.875rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-xxs: 0.6875rem;
  --fs-kpi: 1.75rem;

  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: 0.06em;

  /* --- Spacing (4px base) -------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* --- Radius & elevation -------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(26, 31, 36, 0.05);
  --shadow-sm: 0 1px 3px rgba(26, 31, 36, 0.07), 0 1px 2px rgba(26, 31, 36, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 31, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 31, 36, 0.16);
  --ring: 0 0 0 3px rgba(223, 21, 41, 0.24);

  /* --- Layout -------------------------------------------------------------- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --bottomnav-h: 60px;
  --page-max: 1680px;

  /* --- Motion -------------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index stack (fixed order — do not deviate) ------------------------ */
  --z-content: 1;
  --z-topbar: 50;
  --z-sidebar: 60;
  --z-drawer-scrim: 290;
  --z-more-menu: 299;
  --z-bottomnav: 300;
  --z-popover: 400;
  --z-modal: 500;
  --z-critical: 600;
  --z-toast: 700;

  /* --- Aliases kept so layout/components stay brand-agnostic --------------- */
  --navy-900: var(--ink-900);
  --navy-800: var(--ink-800);
  --navy-700: var(--ink-700);
  --navy-600: var(--ink-600);
  --navy-500: var(--ink-500);
  --navy-400: var(--ink-300);
  --navy-200: var(--ink-200);
  --navy-050: var(--ink-050);
  --coral-700: var(--brand-600);
  --coral-600: var(--brand-500);
  --coral-200: var(--brand-200);
  --coral-050: var(--brand-050);
  --gold-700: var(--warn-700);
  --gold-600: var(--warn-600);
  --gold-200: #f0dcc0;
  --gold-050: var(--warn-050);
}

html[dir="rtl"] {
  --font-sans: var(--font-arabic);
  --font-brand: var(--font-arabic);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}