:root {
  color-scheme: dark;

  --color-bg: #070909;
  --color-app: #0b0d0e;
  --color-sidebar: #080a0b;
  --color-surface: rgba(24, 25, 25, 0.92);
  --color-surface-2: rgba(35, 36, 36, 0.78);
  --color-surface-3: rgba(48, 47, 43, 0.72);
  --color-border: rgba(212, 175, 93, 0.22);
  --color-border-strong: rgba(212, 175, 93, 0.48);
  --color-primary: #d6ad58;
  --color-primary-2: #f0c86a;
  --color-primary-hover: #e8bd5c;
  --color-primary-soft: rgba(214, 173, 88, 0.12);
  --color-text: #f5efe2;
  --color-heading: #fff4df;
  --color-muted: #c1b8a9;
  --color-dim: #857f75;
  --color-success: #75c26b;
  --color-success-soft: rgba(77, 142, 72, 0.18);
  --color-warning: #e4b447;
  --color-warning-soft: rgba(228, 180, 71, 0.16);
  --color-danger: #ff6656;
  --color-danger-soft: rgba(255, 102, 86, 0.14);
  --color-focus: rgba(240, 200, 106, 0.28);

  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-popover: 0 24px 60px rgba(0, 0, 0, 0.46);

  --radius-button: 8px;
  --radius-input: 8px;
  --radius-dropdown: 10px;
  --radius-card: 12px;
  --radius-table: 12px;
  --radius-modal: 16px;
  --radius-pill: 9999px;

  --font-body: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 42px;
  --text-3xl: 56px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --sidebar-width: 266px;
  --header-height: 74px;
}