/*
  MonoDuty design tokens as framework-agnostic CSS custom properties.
  For agents/projects NOT using Tailwind — mirrors tailwind.config.ts exactly.
  Semantic ground tokens (--bg, --panel, --text, …) flip in dark mode; the raw
  palette scales stay constant.
*/

:root {
  /* --- Brand: magenta / orchid (INTERACTION) --- */
  --primary-50: #fcf4fb;  --primary-100: #f8e6f7; --primary-200: #f1cff0;
  --primary-300: #e7aee3; --primary-400: #d783d2; --primary-500: #c35cbb;
  --primary-600: #a74aa3; --primary-700: #8a3885; --primary-800: #722f6d;
  --primary-900: #5e2a5a; --primary-950: #391236;

  /* --- Accent: teal / mint (SUCCESS) --- */
  --accent-50: #f0fdf9;  --accent-100: #ccf8eb; --accent-200: #99eed9;
  --accent-300: #5ce0c3; --accent-400: #76dfc3; --accent-500: #14b896;
  --accent-600: #0d947a; --accent-700: #0f7663; --accent-800: #125e50;
  --accent-900: #134e43; --accent-950: #062d28;

  /* --- Warm purple-tinted neutral --- */
  --gray-50: #fbfafc;  --gray-100: #f5f4f6; --gray-200: #e8e5ea;
  --gray-300: #d4ced6; --gray-400: #a89fab; --gray-500: #756b78;
  --gray-600: #574f59; --gray-700: #463f48; --gray-800: #2d272f;
  --gray-900: #1c161d; --gray-950: #0b050a;

  /* --- Sidebar: deep purple (NAV CHROME ONLY) --- */
  --sidebar: #3a0c57; --sidebar-hover: #4e1475;
  --sidebar-active: #29083f; --sidebar-border: #4e1475;

  /* --- Dark elevated surface (the one sanctioned literal) --- */
  --surface-dark: #090E1A;

  /* --- Signature glass shadows --- */
  --shadow-glass: 0 4px 30px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.02);
  --shadow-glass-dark: 0 4px 30px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.1);

  /* --- Semantic ground (LIGHT) --- */
  --bg: var(--gray-50);
  --panel: #ffffff;
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-secondary: var(--gray-500);
  --shadow: var(--shadow-glass);
  --focus-ring: rgba(195, 92, 187, .5); /* primary-500 / 50 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--gray-950);
    --panel: var(--surface-dark);
    --border: rgba(255, 255, 255, .10);
    --text: var(--gray-50);
    --text-secondary: var(--gray-400);
    --shadow: var(--shadow-glass-dark);
  }
}

/* Explicit theme override (viewer toggle stamps data-theme on :root) */
:root[data-theme="dark"] {
  --bg: var(--gray-950); --panel: var(--surface-dark);
  --border: rgba(255,255,255,.10); --text: var(--gray-50);
  --text-secondary: var(--gray-400); --shadow: var(--shadow-glass-dark);
}
:root[data-theme="light"] {
  --bg: var(--gray-50); --panel: #ffffff;
  --border: var(--gray-200); --text: var(--gray-900);
  --text-secondary: var(--gray-500); --shadow: var(--shadow-glass);
}

/*
  Semantic STATUS colors use raw Tailwind families (kept separate from brand):
    up / resolved / success  → emerald-500 #10b981 (dark emerald-400 #34d399)
    down / open / error      → rose-500    #f43f5e (dark rose-400    #fb7185)
    paused / acknowledged    → amber-500   #f59e0b (dark amber-400   #fbbf24)
    investigating / low      → blue-500    #3b82f6 (dark blue-400    #60a5fa)
    high (severity)          → orange-500  #f97316
    medium (severity)        → yellow-500  #eab308
    pending / closed         → gray-400 / gray-500
*/