:root {
  --font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;

  --color-page: #f8fbfe;
  --color-surface: #ffffff;
  --color-sidebar: #fbfdff;
  --color-sidebar-hover: #f1f7fd;
  --color-text: #0a1e3b;
  --color-text-soft: #243956;
  --color-muted: #60718a;
  --color-border: #dce6ef;
  --color-border-strong: #ccd9e6;
  --color-blue: #087df5;
  --color-blue-hover: #006fe8;
  --color-blue-soft: #eaf4ff;
  --color-blue-faint: #f4f9ff;
  --color-error: #b33636;

  --sidebar-width: clamp(17.5rem, 20vw, 20rem);
  --topbar-height: 6rem;
  --brand-height: 7rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-small: 0.75rem;
  --radius-medium: 1rem;
  --shadow-sidebar: 1.5rem 0 4rem rgb(30 80 125 / 13%);
  --shadow-tab: 0 0.5rem 1rem -0.65rem rgb(24 68 108 / 35%), 0 1px 3px rgb(24 68 108 / 10%);
  --shadow-panel: 0 1.25rem 2.5rem -2rem rgb(8 125 245 / 28%), 0 2px 5px rgb(22 62 98 / 4%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 280ms var(--ease-out);
}