/* MONEY-FOX design tokens — palette A "عود وصدف" (oud & mother-of-pearl). Dark only.
   Every color/size used by components comes from here. Change a token, the whole UI follows. */
:root{
  color-scheme:dark;

  /* palette A (from the approved decision) */
  --c-bg:#14100E;
  --c-surface:#1F1915;
  --c-raised:#2B221C;
  --c-text:#EDE6DA;
  --c-primary:#5FB3A6;
  --c-secondary:#C27A4E;

  /* derived */
  --c-text-muted:#B3A797;
  --c-text-faint:#978B7D;
  --c-border:#3A2F27;
  --c-border-strong:#54453A;
  --c-primary-hover:#76C5B8;
  --c-primary-active:#4D9A8E;
  --c-on-primary:#0E1A18;
  --c-secondary-hover:#D68D60;
  --c-secondary-active:#A8653D;
  --c-on-secondary:#1E0E07;
  --c-danger:#E58074;
  --c-danger-bg:#3A1F1C;
  --c-danger-border:#6B342E;
  --c-warning:#E3B552;
  --c-warning-bg:#382C16;
  --c-success:#7BCBA0;
  --c-success-bg:#1B3026;
  --c-info:#86B7DC;
  --c-info-bg:#1A2A38;
  --c-overlay:rgba(10,7,6,.72);
  --c-focus:rgba(95,179,166,.55);

  /* role badge colors (used by the dashboards later) */
  --role-super-owner:#E3B552;
  --role-owner:#C27A4E;
  --role-super-master:#9A86D0;
  --role-master:#5FB3A6;
  --role-cashier:#86B7DC;
  --role-player:#B3A797;

  /* typography */
  --font-display:"Noto Kufi Arabic","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --lh-tight:1.25; --lh-body:1.7;

  /* spacing / radii / sizes */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --control-h:48px; --control-h-sm:38px;
  --container:1120px; --container-narrow:440px;
  --topbar-h:64px;

  /* elevation: layered shadows + a faint inner top highlight */
  --hl:inset 0 1px 0 rgba(237,230,218,.07);
  --shadow-1:0 1px 2px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
  --shadow-2:0 2px 4px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.4);
  --shadow-3:0 4px 8px rgba(0,0,0,.45),0 28px 60px rgba(0,0,0,.55);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.14s; --t-base:.22s;

  --z-topbar:20; --z-modal:50; --z-toast:60;
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0s;--t-base:0s}}