/* ============================================================
   Zahrat Al-Kawthar — Design tokens
   Sampled from the salon's own mark: warm ivory ground, a deep
   wine "ink", bronze gold, dusty rose. Status colors are drawn
   from this same family rather than stock traffic-light hues.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --ink: #2A1B20;              /* body text, warm near-black */
  --wine-900: #3C1530;
  --wine-800: #4A1A3B;
  --wine-700: #5A2142;         /* primary brand ink */
  --wine-600: #6B2A4F;
  --wine-500: #7F3A61;
  --wine-100: #F3E4EC;
  --wine-50:  #FAF1F5;

  --gold-700: #93672D;
  --gold-600: #B8863E;         /* accent */
  --gold-500: #C9994F;
  --gold-300: #E0C48C;
  --gold-100: #F3E7CE;

  --rose-600: #B06F86;
  --rose-500: #C98CA0;         /* pending */
  --rose-300: #E4BFCB;
  --rose-100: #F7E9EE;

  --sage-700: #33513E;
  --sage-600: #4F7A5B;         /* approved / matched */
  --sage-100: #E4EFE7;

  --brick-700: #7A2E2E;
  --brick-600: #A13F3F;        /* rejected / shortage */
  --brick-100: #F5E4E0;

  /* ---- Neutrals (warm-tinted grays) ---- */
  --cream: #FBF1E7;            /* page background */
  --cream-deep: #F4E6D8;
  --surface: #FFFDFB;          /* card background */
  --surface-raised: #FFFFFF;
  --line: #E7D9CD;             /* hairline borders */
  --line-strong: #D8C4B4;
  --muted: #8A7268;            /* secondary text */
  --muted-2: #B4A197;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--wine-700);
  --color-primary-hover: var(--wine-800);
  --color-accent: var(--gold-600);
  --color-pending: var(--rose-500);
  --color-pending-bg: var(--rose-100);
  --color-approved: var(--sage-600);
  --color-approved-bg: var(--sage-100);
  --color-danger: var(--brick-600);
  --color-danger-bg: var(--brick-100);
  --color-surplus: var(--gold-600);
  --color-surplus-bg: var(--gold-100);

  /* ---- Typography ---- */
  --font-display-ar: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-display-lat: 'Marcellus', Georgia, serif;
  --font-ui-ar: 'Cairo', 'Noto Kufi Arabic', sans-serif;
  --font-ui-lat: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

  /* ---- Spacing scale ---- */
  --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;
  --sp-16: 64px;

  /* ---- Radius: sharper for ledger/data, softer for brand chrome ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Shadow: used sparingly, only for true elevation (modals, popovers) ---- */
  --shadow-sm: 0 1px 2px rgba(42, 27, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(58, 25, 45, 0.12);
  --shadow-lg: 0 20px 48px rgba(58, 25, 45, 0.18);

  --sidebar-w: 248px;
  --topbar-h: 64px;
  --bottomnav-h: 64px;
}