:root {
  --didit-accent: #266df0;
  --didit-canvas: #ffffff;
  --didit-paper: #f4f5f6;
  --didit-ink: #1c1d1f;
  --didit-muted: #6f7988;
  --didit-hairline: #e4e7ec;
  --didit-selection: #e4edff;
  --didit-card-shadow: 0 2px 3px -2px rgba(28, 40, 64, 0.1),
    0 4px 6px -2px rgba(28, 40, 64, 0.04);
  accent-color: var(--didit-accent);
}

:where(html, body, button, input, textarea, select) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "ss03" 1;
  font-variant-ligatures: contextual common-ligatures;
}

:where(body, button, input, textarea, select) {
  font-weight: 500 !important;
}

:where(body) {
  background-color: var(--didit-canvas);
  color: var(--didit-ink);
}

:where(button, [role="button"], input, textarea, select) {
  border-radius: 10px !important;
}

:where(button, input, textarea, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--didit-accent) !important;
  outline-offset: 2px;
}

::selection {
  background: var(--didit-selection);
  color: var(--didit-ink);
}

* {
  scrollbar-color: #cad0d9 transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #cad0d9;
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9fa1a7;
}

:where(
    table,
    th,
    td,
    [role="table"],
    [role="grid"],
    [role="row"],
    [role="rowheader"],
    [role="columnheader"],
    [role="gridcell"],
    [role="list"],
    [role="listbox"],
    [role="menu"],
    [role="listitem"],
    [role="option"],
    [role="menuitem"]
  ) {
  border-color: var(--didit-hairline) !important;
}

:where(
    kbd,
    [data-badge],
    [data-tag],
    [data-testid*="chip" i],
    [class*="_badge_"],
    [class*="_tag_"],
    [class*="_pill_"],
    [class*="_chip_"]
  ) {
  border-color: var(--didit-hairline) !important;
  border-radius: 7px !important;
}

:where([data-testid*="card" i], [class*="_card_"]) {
  border-color: var(--didit-hairline) !important;
  border-radius: 12px !important;
  box-shadow: var(--didit-card-shadow);
}

:where(
    [data-testid*="sidebar" i],
    [data-testid*="navigation-drawer" i],
    [class*="_sidebar_" i],
    [class*="_sideBar_"],
    [class*="_navigationDrawer_"]
  ) {
  background-color: var(--didit-paper);
}