/* Task App Design Tokens + Base Reset
 * TASK-150: extracted out of app.css so marketing/auth/legal pages (gated by IsLightweightRoute()
 * in App.razor) can get the design tokens and base reset they actually render with, WITHOUT pulling
 * in the ~4000 lines of app-shell-only CSS (sidebar, task list/detail, dialogs, dashboards,
 * whiteboard, timesheet grid, etc) that used to ride along unconditionally in app.css. Keep this
 * file cheap: custom-property declarations and a tiny universal reset only -- no selectors that
 * only the authenticated app shell needs. Those still live in app.css, now gated. The other small
 * piece those lightweight routes need -- actual classes like .login-page/.login-card/.form-control/
 * .demo-wizard -- lives in css/auth-shared.css, loaded alongside this file.
 *
 * Font: Inter (locally bundled in wwwroot/fonts/Inter/)
 * Color scheme: dark sidebar + purple accent
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sidebar */
  --sidebar-bg: #1e1e2e;
  --sidebar-text: #cdd6f4;
  /* Muted label text on the DARK sidebar. #6c7086 was too dim (~2.1:1); brightened for
     readability of the workspace name and section labels without competing with --sidebar-text. */
  --sidebar-text-muted: #9095b2;
  --sidebar-border: #313244;
  --sidebar-hover: #313244;
  --sidebar-active: #45475a;
  /* TASK-686: unseen-activity dot on the dark sidebar (~6:1 on --sidebar-bg; --accent is only ~2.9:1 there). */
  --sidebar-unseen: #a78bfa;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 52px;

  /* Surfaces */
  --surface-0: #f8fafc;
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;

  /* Dialog / input surface aliases. Defined explicitly so any component that
     references them resolves to the (light) design system instead of falling
     back to a hardcoded dark literal — the cause of dark-text-on-dark clashes. */
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-1);
  --bg-hover: var(--surface-2);
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* Text (on LIGHT surfaces). Ordered dark→light; all meet WCAG AA (≥4.5:1) on white.
     --text-muted was #94a3b8 (slate-400, ~2.5:1) — the "light gray on white" that was hard to
     read in empty states, breadcrumbs, hints, due dates. Darkened to ~5:1 while staying clearly
     secondary to --text-primary/--text-secondary. */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #5b6675;

  /* Accent */
  --accent: #7c3aed;
  --accent-light: #ede9fe;
  --accent-hover: #6d28d9;

  /* Status badges */
  --status-open-bg: #f1f5f9;
  --status-open-fg: #64748b;
  --status-progress-bg: #ede9fe;
  --status-progress-fg: #7c3aed;
  --status-review-bg: #fef3c7;
  --status-review-fg: #d97706;
  --status-done-bg: #dcfce7;
  --status-done-fg: #16a34a;

  /* Priority */
  --pri-urgent: #ef4444;
  --pri-high: #f97316;
  --pri-normal: #6366f1;
  --pri-low: #94a3b8;

  /* Semantic */
  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;
  --info: #0ea5e9;

  --on-accent: #ffffff;
  --surface-3: #e2e8f0;
  --danger-bg: #fef2f2;
  --danger-fg: #991b1b;
  --success-bg: #dcfce7;
  --success-fg: #166534;
  --warning-bg: #ffedd5;
  --warning-fg: #9a3412;

  /* Z-index scale (TASK-570). The ONLY place layer numbers live: app.css, responsive.css, the other
     stylesheets and every .razor/.cs inline style reference these via var(--z-*). Task.Tests
     ZIndexScaleTests fails on any literal z-index above 9 outside this block (0-9 is allowed for
     purely local stacking inside one component). Values keep the pre-token relative order, so
     only change a number here together with the layers listed around it.
     MudBlazor 9.x layers (MudTheme.ZIndex defaults, pinned by ZIndexScaleTests):
     drawer 1100, popover 1200, appbar 1300, dialog 1400, snackbar 1500, tooltip 1600. */
  --z-pane: 20;                 /* submenu column; mobile chat thread pane */
  --z-rail: 30;                 /* desktop icon rail (above the submenu) */
  --z-bottombar: 50;            /* mobile bottom tab bar */
  --z-dropdown: 60;             /* absolute-positioned menus/popovers anchored inside page content */
  --z-dropdown-sub: 61;         /* a submenu flyout inside a --z-dropdown menu */
  --z-overlay: 100;             /* docked panel overlays / dimming backdrops under the top bar */
  --z-flyout-backdrop: 199;     /* click-catcher behind a flyout panel */
  --z-flyout: 200;              /* notepad / global-create style slide-outs */
  --z-popover-backdrop: 205;    /* click-catcher behind a popover (above flyouts) */
  --z-popover: 210;             /* custom popovers/dropdowns that must clear overlays and flyouts */
  --z-shell-backdrop: 399;      /* click-outside trap for MudPopover dropdowns opened from the top bar */
  --z-topbar: 500;              /* global top bar (deliberately below MudBlazor's appbar 1300, see app.css) */
  --z-nav-backdrop: 508;        /* mobile nav drawer: dim layer */
  --z-nav-submenu: 509;         /* mobile nav drawer: submenu */
  --z-nav-rail: 510;            /* mobile nav drawer: rail */
  --z-nav-toggle: 600;          /* mobile hamburger, above the drawer */
  --z-fullscreen: 1100;         /* gantt full-screen pane: over app chrome, below --z-modal dialogs/popovers */
  --z-modal: var(--mud-zindex-popover, 1200);   /* custom full-page modals (AppCenter) */
  --z-modal-nested: var(--mud-zindex-appbar, 1300); /* a dialog opened from a --z-modal */
  --z-lightbox: 2000;           /* full-screen image viewer, above every dialog/snackbar/tooltip */
  --z-toast: 3000;              /* inline error toasts, top of the app */
}

/* Dark tokens. data-theme is the *resolved* scheme (light|dark). System is stored separately
   (data-theme-pref) and resolved by theme.js, so Light always beats OS dark and Dark always
   beats OS light. Seeded from the existing dark sidebar palette. */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #11111b;
  --surface-1: #1e1e2e;
  --surface-2: #313244;
  --surface-3: #45475a;
  --border: #45475a;
  --border-subtle: #313244;
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-2);
  --bg-hover: var(--surface-2);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-muted: #9095b2;
  --accent: #a78bfa;
  --accent-light: #2e2060;
  --accent-hover: #c4b5fd;
  --status-open-bg: #313244;
  --status-open-fg: #a6adc8;
  --status-progress-bg: #2e2060;
  --status-progress-fg: #c4b5fd;
  --status-review-bg: #3d2e12;
  --status-review-fg: #fbbf24;
  --status-done-bg: #16351f;
  --status-done-fg: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #4ade80;
  --info: #38bdf8;
  --on-accent: #ffffff;
  --danger-bg: #3f1d1d;
  --danger-fg: #fca5a5;
  --success-bg: #16351f;
  --success-fg: #86efac;
  --warning-bg: #3d2e12;
  --warning-fg: #fcd34d;

  --mud-palette-primary: #a78bfa;
  --mud-palette-primary-darken: #8b5cf6;
  --mud-palette-primary-lighten: #2e2060;
  --mud-palette-secondary: #818cf8;
  --mud-palette-background: #11111b;
  --mud-palette-surface: #1e1e2e;
  --mud-palette-drawer-background: #1e1e2e;
  --mud-palette-drawer-text: #cdd6f4;
  --mud-palette-drawer-icon: #cdd6f4;
  --mud-palette-appbar-background: #1e1e2e;
  --mud-palette-appbar-text: #cdd6f4;
  --mud-palette-text-primary: #cdd6f4;
  --mud-palette-text-secondary: #bac2de;
  --mud-palette-action-default: #a6adc8;
  --mud-palette-divider: #45475a;
  --mud-palette-lines-default: #45475a;
  --mud-palette-table-lines: #45475a;
  --mud-palette-error: #f87171;
  --mud-palette-success: #4ade80;
  --mud-palette-warning: #fb923c;
  --mud-palette-info: #818cf8;
  --mud-palette-overlay-dark: rgba(0,0,0,0.7);
}

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

/* SVGs inside flex/inline contexts align to the text midline, not the baseline. */
svg { vertical-align: middle; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

/* Theme color (Customize Sidebar > Themes). html[data-accent] is set pre-paint by the App.razor head
   script / theme.js; purple is the :root default above so it needs no block. Derived tints use
   color-mix so each color is one value per mode. Mud vars are overridden too: html[...] outranks :root. */
html[data-accent="black"] { --accent: #374151; }
html[data-theme="dark"][data-accent="black"] { --accent: #9ca3af; }
html[data-accent="blue"] { --accent: #0284c7; }
html[data-theme="dark"][data-accent="blue"] { --accent: #38bdf8; }
html[data-accent="pink"] { --accent: #db2777; }
html[data-theme="dark"][data-accent="pink"] { --accent: #f472b6; }
html[data-accent="violet"] { --accent: #a855f7; }
html[data-theme="dark"][data-accent="violet"] { --accent: #c084fc; }
html[data-accent="indigo"] { --accent: #4f6df5; }
html[data-theme="dark"][data-accent="indigo"] { --accent: #818cf8; }
html[data-accent="orange"] { --accent: #ea580c; }
html[data-theme="dark"][data-accent="orange"] { --accent: #fb923c; }
html[data-accent="teal"] { --accent: #0d9488; }
html[data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; }
html[data-accent="bronze"] { --accent: #a1887f; }
html[data-theme="dark"][data-accent="bronze"] { --accent: #bcaaa4; }
html[data-accent="mint"] { --accent: #10b981; }
html[data-theme="dark"][data-accent="mint"] { --accent: #34d399; }
html[data-accent]:not([data-accent="purple"]) {
  --accent-light: color-mix(in srgb, var(--accent) 12%, #ffffff);
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #000000);
  --sidebar-accent-bg: color-mix(in srgb, var(--accent) 24%, transparent);
  --mud-palette-primary: var(--accent);
  --mud-palette-primary-darken: var(--accent-hover);
  --mud-palette-primary-lighten: var(--accent-light);
}
html[data-theme="dark"][data-accent]:not([data-accent="purple"]) {
  --accent-light: color-mix(in srgb, var(--accent) 22%, #1e1e2e);
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #ffffff);
}