/* ==========================================================================
   Zindagi — Work Module · Design Tokens
   Theme: C1 "Iris" (light). Dark theme comes later — keep names theme-agnostic.
   Drop this on :root and never hardcode a raw color/size outside this file.
   ========================================================================== */

:root {
  /* ---- Surfaces & borders ---------------------------------------------- */
  --z-canvas:          #fafafb;   /* app background (page) */
  --z-surface:         #ffffff;   /* sidebar, panels, cards */
  --z-surface-2:       #f1f1f3;   /* inputs, kbd, row hover-2 */
  --z-surface-3:       #e8e8ea;   /* active / pressed */
  --z-row-hover:       #f4f4f6;   /* task row hover */
  --z-border:          #e4e4e7;   /* default hairline */
  --z-border-soft:     #ececee;   /* subtle dividers between rows */
  --z-border-strong:   #d3d3d8;   /* emphasis, kbd border */

  /* ---- Text ------------------------------------------------------------ */
  --z-text:            #131316;   /* titles */
  --z-text-body:       #1c1c20;   /* primary body */
  --z-text-2:          #55565f;   /* secondary / metadata */
  --z-text-3:          #84858f;   /* tertiary / hints */
  --z-text-muted:      #a1a2ab;   /* placeholders, disabled */

  /* ---- Brand / accent (Iris) ------------------------------------------- */
  --z-primary:         #5b5bd6;
  --z-primary-hover:   #6f6fdb;
  --z-primary-active:  #4747b8;
  --z-primary-soft:    #eaeafb;   /* tint fill (active nav, chips) */
  --z-on-primary:      #ffffff;

  /* ---- Semantic -------------------------------------------------------- */
  --z-success:         #16a34a;
  --z-warning:         #d97706;
  --z-danger:          #dc2626;

  /* ---- Task TYPE (badge) ----------------------------------------------- */
  --z-type-dev:        #4f46e5;   --z-type-dev-bg:  rgba(79,70,229,0.12);
  --z-type-ops:        #0891b2;   --z-type-ops-bg:  rgba(8,145,178,0.12);
  --z-type-fin:        #ca8a04;   --z-type-fin-bg:  rgba(202,138,4,0.14);

  /* ---- PRIORITY (bar icon) --------------------------------------------- */
  --z-prio-urgent:     #e5484d;   --z-prio-urgent-bg: rgba(229,72,77,0.14);
  --z-prio-high:       #f59e0b;
  --z-prio-medium:     #eab308;
  --z-prio-low:        #6b7280;
  --z-prio-none:       #9aa0a8;

  /* ---- STATUS (state groups) ------------------------------------------- */
  --z-status-backlog:      #6b7280;  /* group: backlog     dashed */
  --z-status-todo:         #6b6d78;  /* group: unstarted   circle */
  --z-status-in-progress:  #d97706;  /* group: started     half-filled */
  --z-status-blocked:      #dc2626;  /* group: started     slash */
  --z-status-done:         #16a34a;  /* group: completed   filled */

  /* ---- Company dots (assignable per company) --------------------------- */
  --z-co-1: #6366f1;  --z-co-2: #0ea5e9;  --z-co-3: #16a34a;
  --z-co-4: #d97706;  --z-co-5: #db2777;  --z-co-6: #0d9488;

  /* ---- Typography ------------------------------------------------------ */
  --z-font: 'Inter', system-ui, -apple-system, sans-serif;
  --z-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --z-fs-display: 26px;  /* page title      · 700 · -0.02em */
  --z-fs-h2:      20px;  /* section heading · 600 */
  --z-fs-h3:      16px;  /* card title      · 600 */
  --z-fs-strong:  14px;  /* subhead         · 600 */
  --z-fs-body:    13px;  /* BASE            · 400 */
  --z-fs-small:   12px;  /* metadata        · 400 */
  --z-fs-caption: 11px;  /* overline        · 600 · 0.08em · uppercase */
  --z-lh:         1.55;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --z-space-1: 4px;   --z-space-2: 8px;   --z-space-3: 12px;
  --z-space-4: 16px;  --z-space-5: 20px;  --z-space-6: 24px;  --z-space-8: 32px;

  /* ---- Radius ---------------------------------------------------------- */
  --z-radius-sm: 4px;  --z-radius-md: 6px;  --z-radius-lg: 8px;
  --z-radius-xl: 12px; --z-radius-full: 9999px;

  /* ---- Elevation ------------------------------------------------------- */
  --z-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);            /* dropdowns, popovers */
  --z-shadow-md: 0 8px 24px rgba(0,0,0,0.10);           /* modals, menus */
  --z-shadow-lg: 0 20px 50px rgba(0,0,0,0.14);          /* app frame */

  /* ---- Rows (density: dense/Plane-like) -------------------------------- */
  --z-row-height: 36px;
  --z-focus-ring: 0 0 0 3px rgba(91,91,214,0.20);
}

/* Base resets — apply to the app shell */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--z-canvas);
  color: var(--z-text-body);
  font-family: var(--z-font);
  font-size: var(--z-fs-body);
  line-height: var(--z-lh);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--z-primary); text-decoration: none; }
a:hover { color: var(--z-primary-active); }
:focus-visible { outline: none; box-shadow: var(--z-focus-ring); border-radius: var(--z-radius-md); }
::selection { background: rgba(91,91,214,0.18); }