/* ==========================================================================
   COMANDA — Design Tokens
   Restaurant order-management dashboard
   Palette: deep navy + white, appetite-orange accent
   ========================================================================== */

:root{
  /* ---- Navy scale (chrome / sidebar / dark surfaces) ---- */
  --navy-950:#080d1f;
  --navy-900:#0d1533;
  --navy-800:#121b40;
  --navy-700:#1a2650;
  --navy-600:#243562;
  --navy-500:#3a4a85;
  --navy-300:#6b78a8;
  --navy-100:#e8eaf6;

  /* ---- Neutrals (content surfaces / text) ---- */
  --white:#ffffff;
  --paper:#f4f5fa;
  --ink-900:#10132a;
  --ink-700:#383c56;
  --ink-500:#6a6f8c;
  --ink-300:#b6bad0;
  --ink-200:#dcdee9;
  --ink-100:#eef0f6;

  /* ---- Accent: appetite orange (CTAs, highlights, brand mark) ---- */
  --accent-600:#e0551f;
  --accent-500:#ff6a2b;
  --accent-400:#ff8a54;
  --accent-100:#ffe6d6;

  /* ---- Status colors ---- */
  --success-600:#16875a;
  --success-500:#1fa971;
  --success-100:#dcf5e9;

  --warning-600:#c98518;
  --warning-500:#e8a93a;
  --warning-100:#fbecd2;

  --danger-600:#c23434;
  --danger-500:#e14848;
  --danger-100:#fbdede;

  --info-600:#28649c;
  --info-500:#3b82c4;
  --info-100:#dcebf7;

  /* ---- Typography ---- */
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* ---- Radii ---- */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(13,21,51,.05);
  --shadow-sm:0 2px 6px rgba(13,21,51,.07);
  --shadow-md:0 8px 20px rgba(13,21,51,.09);
  --shadow-lg:0 20px 48px rgba(13,21,51,.14);

  /* ---- Layout ---- */
  --sidebar-w:264px;
  --sidebar-w-collapsed:88px;
  --topbar-h:76px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;
  --dur-med:260ms;
}

/* ==========================================================================
   Base reset
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; }

img,svg{ display:block; max-width:100%; }

::selection{ background:var(--accent-100); color:var(--accent-600); }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--ink-300) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--ink-200); border-radius:var(--radius-pill); }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-300); }

/* Focus visibility (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}