/* Task Tracker — Design Tokens
 * Brand: "W" stencil monogram — monochrome, geometric, architectural, editorial.
 * Direction: Data-Dense Dashboard × E-Ink/Paper. Ink-on-paper, calm, high-contrast,
 * long-session friendly. One restrained indigo accent; semantics carry timer meaning.
 * Built for vanilla HTML/CSS + jQuery (stocktally_web style), light mode primary.
 */

:root {
  /* ----- Brand / ink ----- */
  --ink: #16161A;            /* near-black — primary actions, brand, headings */
  --ink-soft: #2A2A30;       /* hover on ink surfaces */
  --ink-press: #050507;      /* pressed */
  --on-ink: #FFFFFF;

  /* ----- Accent (restrained — links, focus, active nav, selection) ----- */
  --accent: #2E4DD4;         /* confident indigo */
  --accent-hover: #2540B8;
  --accent-soft: #EAEEFC;    /* tinted backgrounds, selected rows */
  --accent-ring: rgba(46, 77, 212, 0.35);
  --on-accent: #FFFFFF;

  /* ----- Paper / neutrals (Zinc) ----- */
  --paper: #FBFAF8;          /* app background — warm off-white */
  --n-0: #FFFFFF;            /* card / surface */
  --n-50: #FAFAFA;
  --n-100: #F4F4F5;
  --n-150: #ECECEE;
  --n-200: #E4E4E7;
  --n-300: #D4D4D8;
  --n-400: #A1A1AA;
  --n-500: #71717A;
  --n-600: #52525B;
  --n-700: #3F3F46;
  --n-800: #27272A;
  --n-900: #18181B;

  /* ----- Surfaces ----- */
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-hover: var(--n-50);
  --on-surface: var(--ink);
  --on-surface-muted: var(--n-600);   /* min 4.5:1 on paper */
  --on-surface-faint: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-300);

  /* ----- Semantic ----- */
  --success: #15A34A;        /* timer RUNNING, approved */
  --success-soft: #DCFCE7;
  --danger: #DC2626;         /* timer STOP, reject, error */
  --danger-soft: #FEE2E2;
  --warning: #D97706;        /* on-leave, pending */
  --warning-soft: #FEF3C7;
  --info: var(--accent);
  --info-soft: var(--accent-soft);

  /* ----- Role badges ----- */
  --role-admin: #7C3AED;     --role-admin-soft: #F3E8FF;
  --role-rm: #0E7490;        --role-rm-soft: #CFFAFE;
  --role-member: #475569;    --role-member-soft: #E2E8F0;

  /* ----- Project color chips (assignable) ----- */
  --proj-1: #2E4DD4;  --proj-2: #0E7490;  --proj-3: #15A34A;
  --proj-4: #D97706;  --proj-5: #DC2626;  --proj-6: #7C3AED;
  --proj-7: #DB2777;  --proj-8: #525252;

  /* ----- Chart series (monochrome-friendly, accessible) ----- */
  --chart-1: #2E4DD4;  --chart-2: #16161A;  --chart-3: #0E7490;
  --chart-4: #D97706;  --chart-5: #15A34A;  --chart-6: #A1A1AA;

  /* ----- Typography ----- */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* brand, headings */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;     /* UI / body */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;            /* durations, numerals */

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.55;

  /* ----- Spacing (8pt base, desktop-tight) ----- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 40px;
  --space-3xl: 56px;

  /* ----- Radius (sharp, architectural) ----- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ----- Elevation (subtle, ink-tinted) ----- */
  --elev-1: 0 1px 2px rgba(22, 22, 26, 0.05);
  --elev-2: 0 2px 8px rgba(22, 22, 26, 0.07);
  --elev-3: 0 10px 28px rgba(22, 22, 26, 0.10);
  --elev-focus: 0 0 0 3px var(--accent-ring);

  /* ----- Layout ----- */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --topbar-height: 56px;
  --content-max: 1440px;

  /* ----- Density (data-dense dashboard) ----- */
  --card-padding: 16px;
  --grid-gap: 16px;
  --table-row-height: 40px;

  /* ----- Motion (micro-interactions) ----- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 300ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ----- Z-index scale ----- */
  --z-base: 1;
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Optional dark mode — paper inverts to ink */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --paper: #0E0E11;
    --n-0: #18181B;
    --surface: #18181B;
    --surface-sunken: #131316;
    --surface-hover: #1F1F23;
    --on-surface: #F4F4F5;
    --on-surface-muted: #A1A1AA;
    --on-surface-faint: #71717A;
    --border: #2A2A30;
    --border-strong: #3F3F46;
    --ink: #F4F4F5;
    --on-ink: #16161A;
    --accent: #6B86F0;
    --accent-soft: #1C2452;
  }
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--on-surface);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

/* Tabular numerals everywhere numbers matter */
.num, .mono, td.num, .duration { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Visible focus for keyboard nav (a11y) */
:focus-visible { outline: none; box-shadow: var(--elev-focus); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}