:root{
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #0c0c10;
  --color-muted: #5b6472;
  --color-border: #ebeef3;
  --color-accent: #143cf0;

  --color-card: #ffffff;
  --color-card-hover: #f5f7ff;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(12,12,16,.05);
  --shadow-md: 0 8px 24px rgba(12,12,16,.06);

  /* Typography scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 34px;
  --fs-hero: 52px;

  /* Layout */
  --container-width: 1180px;
  --sidebar-width: 280px;
  --rightbar-width: 240px;

  /* Transition */
  --transition: all .15s ease;
}