:root {
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --color-ink: #1c2530;
  --color-muted: #6f7b88;
  --color-canvas: #f4f6f9;
  --color-page: var(--color-canvas);
  --color-surface: #ffffff;
  --color-surface-soft: #f8f9fb;
  --color-line: #dfe4eb;
  --color-line-strong: #c7d0dc;
  --color-topbar: #11161e;
  --color-accent: #e21b3c;
  --color-accent-hover: #c90735;
  --color-accent-soft: #fde8ee;
  --color-success: #139954;
  --color-success-soft: #eaf6ee;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --shadow-card: 0 8px 24px rgb(17 22 30 / 8%);
  --card-metric-background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
  --card-metric-shadow: 0 7px 24px rgb(25 35 48 / 7%);
  --card-metric-padding: 19px;
  --card-surface-background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
  --card-surface-shadow: 0 7px 24px rgb(25 35 48 / 7%);
  --shadow-float: 0 20px 60px rgb(0 0 0 / 40%);
  --topbar-height: 70px;
  --sidebar-width: 230px;
  --content-width: 1510px;
  --itc-taskdock-clearance: 76px;
  --ui-scale: 1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #edf2f7;
  --color-muted: #aab5c3;
  --color-canvas: #11161d;
  --color-surface: #1b222c;
  --color-surface-soft: #222b36;
  --color-line: #303b49;
  --color-line-strong: #465364;
  --color-topbar: #090d12;
  --color-accent-soft: #451827;
  --color-success-soft: #173b2a;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 24%);
  --card-metric-shadow: 0 7px 24px rgb(0 0 0 / 24%);
  --shadow-float: 0 20px 60px rgb(0 0 0 / 62%);
}