/* ===========================================================================
   Rayyan Tours & Travels — Design Tokens (Section B)
   Single source of truth. No colour, radius, shadow or z-index outside this file.
   =========================================================================== */
:root {
  /* --- Brand / identity ------------------------------------------------- */
  --rayyan-maroon:      #8A1538;   /* primary — lifted from the logo */
  --rayyan-maroon-deep: #610E26;   /* headers, sidebar, hover states */
  --rayyan-maroon-tint: #F6E9ED;   /* selected rows, soft badges */

  /* --- Neutrals --------------------------------------------------------- */
  --graphite:     #33363B;         /* body text — the logo subline colour */
  --graphite-mid: #6E737B;         /* secondary text, labels */
  --hairline:     #E4E1DE;         /* borders, dividers, table rules */
  --parchment:    #FBF9F7;         /* app background — warm, never pure white */
  --surface:      #FFFFFF;         /* cards, panels */

  /* --- Accents / semantics ---------------------------------------------- */
  --gold:  #B08B2E;                /* Hajj/Umrah + premium accents ONLY */
  --jade:  #0F7B6C;                /* success, paid, confirmed */
  --amber: #B4740B;                /* pending, awaiting document, SLA at risk */
  --clay:  #A32B1E;                /* overdue, cancelled, rejected */

  /* Semantic tints (derived, for soft badge backgrounds) */
  --jade-tint:  #E4F1EE;
  --amber-tint: #F6ECD9;
  --clay-tint:  #F6E4E1;
  --gold-tint:  #F3ECD8;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Marcellus", Georgia, serif;
  --font-ui: "IBM Plex Sans", "Noto Sans Tamil", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-arabic: "Noto Naskh Arabic", serif;

  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-20: 20px; --fs-26: 26px; --fs-34: 34px; --fs-44: 44px;
  --lh-body: 1.5; --lh-display: 1.15;

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

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-pill: 999px;
  /* the arch — the app's structural motif */
  --arch-radius: 48% 48% 8px 8px / 32% 32% 0 0;

  /* --- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(51,54,59,.06), 0 1px 1px rgba(51,54,59,.04);
  --shadow:    0 2px 8px rgba(51,54,59,.08), 0 1px 2px rgba(51,54,59,.06);
  --shadow-lg: 0 12px 32px rgba(51,54,59,.16), 0 4px 10px rgba(51,54,59,.08);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 248px;
  --sidebar-collapsed: 64px;
  --topbar-h: 56px;
  --content-max: 1440px;
  --row-h: 40px;

  /* --- Z-index scale ---------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-drawer: 400; --z-modal: 500;
  --z-toast: 700; --z-tour: 800;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 120ms; --t-route: 180ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* Compact density — counter staff live here */
[data-density="compact"] {
  --row-h: 32px;
  --sp-3: 9px; --sp-4: 12px; --sp-5: 15px; --sp-6: 18px;
}