:root {
  --color-canvas: #f7f8fc;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f2f8;
  --color-text: #181a25;
  --color-text-soft: #5f6475;
  --color-text-faint: #858a9b;
  --color-border: #e4e6ef;
  --color-border-strong: #cfd2df;
  --color-primary: #6d5ef6;
  --color-primary-hover: #5949e8;
  --color-primary-soft: #efedff;
  --color-accent: #ff7184;
  --color-success: #129b83;
  --color-success-soft: #e7f8f4;
  --color-warning: #b66b05;
  --color-warning-soft: #fff6df;
  --color-danger: #d4455d;
  --color-danger-soft: #fff0f2;
  --color-info: #2b6fd6;
  --color-info-soft: #edf4ff;

  --font-sans: "Be Vietnam Pro", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --text-display: clamp(2.45rem, 7vw, 5rem);

  --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;
  --space-16: 4rem;

  --radius-control: 10px;
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-panel: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(25, 28, 45, 0.04), 0 10px 32px rgba(25, 28, 45, 0.06);
  --shadow-elevated: 0 24px 70px rgba(29, 25, 71, 0.18);
  --focus-ring: 0 0 0 3px rgba(109, 94, 246, 0.22);
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;

  --sidebar-width: 252px;
  --content-max: 1240px;
}