/* ============================================================================
   Mashwangi — Design Tokens
   Ported 1:1 from the approved Ops Console design system (index.html).
   This file is the single source of truth for color, type, spacing, motion,
   and elevation across the whole app — every other stylesheet reads these
   variables rather than hardcoding values.
   ============================================================================ */

:root{
  --bg:#F6F7FB;
  --bg-alt:#ECEFF6;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;
  --surface-3:#F1F3F9;
  --border:#E5E8F1;
  --border-strong:#CDD3E3;
  --ink:#131625;
  --ink-soft:#5B6178;
  --ink-faint:#9298AC;
  --accent:#FF4D6D;
  --accent-hover:#F0344F;
  --accent-deep:#C21F42;
  --accent-bright:#FF7A93;
  --accent-soft:#FFE5EB;
  --accent-soft-strong:#FFC6D2;
  --accent-grad:linear-gradient(135deg,#FF7593,#FF3D5E);
  --gold:#E3960A;
  --gold-soft:#FFF1D6;
  --success:#16A34A;
  --success-soft:#DEFAE8;
  --warning:#D97706;
  --warning-soft:#FDF0D3;
  --danger:#DC2626;
  --danger-soft:#FDE3E1;
  --info:#2F6FED;
  --info-soft:#E2ECFF;
  --radius-sm:7px;
  --radius-md:11px;
  --radius-lg:17px;
  --radius-xl:22px;
  --radius-full:999px;
  --shadow-xs:0 0px 7px rgba(18,20,35,.06);
  --shadow-sm:0 2px 6px rgba(18,20,35,.07);
  --shadow-md:0 12px 32px -12px rgba(18,20,35,.18);
  --shadow-lg:0 24px 60px -18px rgba(18,20,35,.24);
  --shadow-card:0 1px 3px rgba(18,20,35,.09),0 8px 20px -10px rgba(18,20,35,.16);
  --shadow-glow:0 0 0 1px rgba(255,77,109,.08),0 8px 24px -8px rgba(255,77,109,.28);
  --sidebar-w:266px;
  --sidebar-w-collapsed:78px;
  --topbar-h:68px;
  --font-display:'Plus Jakarta Sans','Cairo',sans-serif;
  --font-body:'Inter','Cairo',sans-serif;
  --font-arabic:'Cairo','Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --ease-spring:cubic-bezier(.32,1.5,.53,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-1:.14s;
  --dur-2:.26s;
  --dur-3:.45s;
  color-scheme:light;

  /* Back-compat aliases so pages written against the old token names
     (Phases 1-8) keep working without a full markup rewrite. */
  --color-bg:var(--bg);
  --color-surface:var(--surface);
  --color-surface-alt:var(--surface-3);
  --color-border:var(--border);
  --color-primary:var(--accent);
  --color-primary-dark:var(--accent-deep);
  --color-primary-light:var(--accent-bright);
  --color-primary-tint:var(--accent-soft);
  --color-accent:var(--gold);
  --color-accent-dark:#9c6b06;
  --color-accent-light:var(--gold);
  --color-accent-tint:var(--gold-soft);
  --color-text:var(--ink);
  --color-text-muted:var(--ink-soft);
  --color-text-inverse:#FFFFFF;
  --color-success:var(--success);
  --color-warning:var(--warning);
  --color-danger:var(--danger);
  --color-info:var(--info);
  --color-status-available:var(--success);
  --color-status-occupied:var(--danger);
  --color-status-reserved:var(--warning);
  --color-status-needs-cleaning:var(--ink-faint);
  --text-xs:11.5px;
  --text-sm:13px;
  --text-base:14px;
  --text-lg:15.5px;
  --text-xl:19px;
  --text-2xl:23px;
  --text-3xl:30px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:22px;
  --space-6:28px;
  --space-8:40px;
  --space-10:56px;
}
html[data-theme="dark"]{
  --bg:#0A0C13;
  --bg-alt:#10131C;
  --surface:#151824;
  --surface-2:#1A1E2B;
  --surface-3:#202432;
  --border:#262B3A;
  --border-strong:#343B4E;
  --ink:#EEF0F8;
  --ink-soft:#A7AEC4;
  --ink-faint:#6C7288;
  --accent:#FF6B87;
  --accent-hover:#FF849D;
  --accent-deep:#D63A5C;
  --accent-bright:#FF9BAD;
  --accent-soft:rgba(255,107,135,.16);
  --accent-soft-strong:rgba(255,107,135,.30);
  --accent-grad:linear-gradient(135deg,#FF8299,#FF4568);
  --gold:#F6B03D;
  --gold-soft:rgba(246,176,61,.16);
  --success:#34D399;
  --success-soft:rgba(52,211,153,.15);
  --warning:#FBBF24;
  --warning-soft:rgba(251,191,36,.15);
  --danger:#F87171;
  --danger-soft:rgba(248,113,113,.16);
  --info:#60A5FA;
  --info-soft:rgba(96,165,250,.16);
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 14px 36px -14px rgba(0,0,0,.55);
  --shadow-lg:0 28px 64px -20px rgba(0,0,0,.65);
  --shadow-card:0 1px 3px rgba(0,0,0,.4),0 8px 22px -10px rgba(0,0,0,.55);
  --shadow-glow:0 0 0 1px rgba(255,107,135,.14),0 8px 28px -6px rgba(255,107,135,.30);
  color-scheme:dark;
}