/* Flowboard — Monday-inspired design tokens */

:root {
  /* Type */
  --font-sans: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Surface */
  --bg-app: #f6f7fb;
  --bg-surface: #ffffff;
  --bg-sidebar: #1f2533;
  --bg-sidebar-hover: #2a3142;
  --bg-sidebar-active: #323a4f;
  --bg-topbar: #ffffff;
  --bg-subtle: #f5f6f8;
  --bg-hover: #f0f3f7;

  /* Short aliases — many widgets (admin dropdowns, modals, role
     pills) reference --surface / --surface-2 / --ink / --brand-faint
     directly. Without these aliases the var() resolves to its initial
     value (transparent for backgrounds), so portal'd dropdowns become
     see-through and table rows beneath them bleed up through the
     menu. Defining them here keeps every page consistent. */
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --ink: #323338;
  --brand-faint: #cce5ff;

  /* Borders */
  --border: #e6e9ef;
  --border-strong: #d0d4dc;
  --border-row: #eaecf1;

  /* Ink */
  --ink-strong: #0f1729;
  --ink-body: #323338;
  --ink-muted: #676879;
  --ink-faint: #9aa0ae;
  --ink-on-dark: #e8eaf0;
  --ink-on-dark-muted: #8d94a8;

  /* Brand (Monday-ish royal blue / deep purple) */
  --brand: #0073ea;
  --brand-dark: #0060b9;
  --brand-soft: #cce5ff;
  --accent-purple: #a25ddc;

  /* Status palette (Monday "color scale") */
  --status-backlog: #c4c4c4;
  --status-backlog-ink: #3d3d3d;
  --status-todo: #579bfc;
  --status-progress: #fdab3d;
  --status-review: #a25ddc;
  --status-done: #00c875;
  --status-blocked: #e2445c;

  /* Priority */
  --prio-critical: #bb3354;
  --prio-high: #e2445c;
  --prio-medium: #fdab3d;
  --prio-low: #579bfc;
  --prio-none: #c4c4c4;

  /* Epic group colors (Monday group bar hues) */
  --epic-1: #00c875; /* green */
  --epic-2: #a25ddc; /* purple */
  --epic-3: #fdab3d; /* orange */
  --epic-4: #579bfc; /* blue */
  --epic-5: #e2445c; /* red */
  --epic-6: #037f4c; /* dark green */
  --epic-7: #0086c0; /* cyan */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 22, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 22, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 22, 40, 0.14);
  --shadow-drawer: -12px 0 40px rgba(16, 22, 40, 0.12);

  /* Radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Row heights */
  --row-h: 38px;
  --row-h-compact: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }