/* =====================================================================
   RestoMadar — Brand Design Tokens  v1.0  (رستو مدار)
   One orbit for the whole restaurant: guest → kitchen → stock → books.
   Fonts are bundled locally (SIL OFL): Outfit (display), Inter (UI),
   Noto Sans Arabic (Arabic). Paths are relative to /tokens/.
   ===================================================================== */
@font-face{font-family:"Outfit";src:url("../assets/fonts/Outfit.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("../assets/fonts/NotoSansArabic.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* ---- Core palette ---- */
  /* Madar Teal — the orbit. Primary action, links, focus, brand ring. */
  --rm-teal-50:#EEF8F6; --rm-teal-100:#D5EFEA; --rm-teal-200:#A9DED5; --rm-teal-300:#5CC3B5;
  --rm-teal-400:#2AA596; --rm-teal-500:#148D80; --rm-teal-600:#0E7C74; --rm-teal-700:#0A5F59;
  --rm-teal-800:#0A4A46; --rm-teal-900:#083B38;
  /* Night Ink — the core. Text, navigation, dark surfaces. */
  --rm-ink-950:#0A131E; --rm-ink-900:#0F1B2A; --rm-ink-800:#172638; --rm-ink-700:#24364C;
  --rm-ink-600:#3A4D64; --rm-ink-500:#5A6B80; --rm-ink-400:#8593A5; --rm-ink-300:#B4BECB;
  /* Saffron — the planet. Highlights, "live" signals, attention. Never body text on white. */
  --rm-saffron-50:#FEF7EA; --rm-saffron-100:#FDEBCB; --rm-saffron-300:#F8C66F;
  --rm-saffron-500:#F2A22C; --rm-saffron-600:#D98A12; --rm-saffron-700:#A9680A;
  /* Sand — warm neutrals for hospitality surfaces. */
  --rm-sand-0:#FFFFFF; --rm-sand-25:#FDFCFA; --rm-sand-50:#FAF8F4; --rm-sand-100:#F2EEE6;
  --rm-sand-200:#E5DED2; --rm-sand-300:#D3CABB;

  /* ---- Semantic ---- */
  --rm-success-700:#22703C; --rm-success-600:#27804A; --rm-success-100:#E2F2E7;
  --rm-warning-700:#9A600A; --rm-warning-600:#C98012; --rm-warning-100:#FCEFD5;
  --rm-danger-700:#A32A20;  --rm-danger-600:#CF3B2E;  --rm-danger-100:#FBE1DE;
  --rm-info-700:#2357A6;    --rm-info-600:#2F6FD0;    --rm-info-100:#E2ECFA;

  /* ---- Roles (light) ---- */
  --rm-bg:var(--rm-sand-50);
  --rm-surface:var(--rm-sand-0);
  --rm-surface-2:var(--rm-sand-25);
  --rm-surface-sunken:var(--rm-sand-100);
  --rm-border:var(--rm-sand-200);
  --rm-border-strong:var(--rm-sand-300);
  --rm-text:var(--rm-ink-900);
  --rm-text-2:var(--rm-ink-600);
  --rm-text-3:var(--rm-ink-500);
  --rm-primary:var(--rm-teal-600);
  --rm-primary-hover:var(--rm-teal-700);
  --rm-primary-soft:var(--rm-teal-100);
  --rm-accent:var(--rm-saffron-500);
  --rm-nav-bg:var(--rm-ink-900);
  --rm-focus:0 0 0 3px rgba(14,124,116,.35);

  /* ---- Type ---- */
  --rm-font-display:"Outfit","Inter",system-ui,sans-serif;
  --rm-font-ui:"Inter",system-ui,sans-serif;
  --rm-font-ar:"Noto Sans Arabic","Cairo","Tahoma",sans-serif;
  --rm-font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --rm-fs-xs:12px; --rm-fs-sm:13px; --rm-fs-md:15px; --rm-fs-lg:17px; --rm-fs-xl:20px;
  --rm-fs-2xl:26px; --rm-fs-3xl:34px; --rm-fs-4xl:48px; --rm-fs-5xl:64px;
  --rm-lh-tight:1.15; --rm-lh-body:1.5; --rm-lh-ar:1.7;

  /* ---- Shape, depth, motion ---- */
  --rm-r-sm:8px; --rm-r-md:12px; --rm-r-lg:16px; --rm-r-xl:24px; --rm-r-pill:999px;
  --rm-sh-1:0 1px 2px rgba(15,27,42,.06),0 1px 3px rgba(15,27,42,.06);
  --rm-sh-2:0 6px 18px rgba(15,27,42,.08),0 1px 3px rgba(15,27,42,.06);
  --rm-sh-3:0 22px 60px rgba(10,19,30,.24),0 4px 12px rgba(10,19,30,.10);
  --rm-ease:cubic-bezier(.2,.7,.2,1); --rm-dur-1:120ms; --rm-dur-2:200ms; --rm-dur-3:320ms;

  /* ---- Space (4pt) & touch ---- */
  --rm-s1:4px; --rm-s2:8px; --rm-s3:12px; --rm-s4:16px; --rm-s5:20px; --rm-s6:24px; --rm-s8:32px; --rm-s10:40px; --rm-s12:48px;
  --rm-touch:48px; --rm-touch-lg:56px;
}

/* ---- Roles (dark) — kitchen screens, night service, user preference ---- */
[data-theme="dark"]{
  --rm-bg:#0B1520; --rm-surface:#122030; --rm-surface-2:#16263A; --rm-surface-sunken:#0E1A27;
  --rm-border:#22344A; --rm-border-strong:#2E4560;
  --rm-text:#E9EEF3; --rm-text-2:#B4BECB; --rm-text-3:#8593A5;
  --rm-primary:var(--rm-teal-300); --rm-primary-hover:#7ED3C7; --rm-primary-soft:rgba(92,195,181,.16);
  --rm-nav-bg:#08111B;
}