:root {
  /* colors */
  --bg:           #0C0C0D;
  --surface:      rgba(252, 247, 241, 0.04);
  --surface-2:    rgba(252, 247, 241, 0.07);
  --surface-3:    rgba(252, 247, 241, 0.10);
  --border:       rgba(252, 247, 241, 0.12);
  --border-2:     rgba(252, 247, 241, 0.20);
  --text:         #FCF7F1;
  --text-muted:   rgba(252, 247, 241, 0.50);
  --text-dim:     rgba(252, 247, 241, 0.30);
  --accent:       #C56A2D;
  --accent-dim:   rgba(197, 106, 45, 0.15);
  --danger:       #E04444;
  --danger-dim:   rgba(224, 68, 68, 0.12);
  --success:      #4CAF7B;
  --success-dim:  rgba(76, 175, 123, 0.12);
  --warning:      #D4A017;
  --warning-dim:  rgba(212, 160, 23, 0.12);

  /* typography */
  --font:         'Söhne', 'Helvetica Neue', Arial, sans-serif;
  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    14px;
  --text-lg:      16px;
  --text-xl:      20px;
  --text-2xl:     28px;

  /* spacing */
  --page-x:       32px;
  --card-pad:     1.25rem;
  --gap-xs:       0.25rem;
  --gap-sm:       0.5rem;
  --gap-md:       1rem;
  --gap-lg:       1.5rem;
  --gap-xl:       2rem;

  /* radius */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    6px;

  /* layout */
  --sidebar-w:    220px;
  --topbar-h:     56px;
  --content-max:  1100px;
  --mobile-nav-h: 60px;

  /* transitions */
  --t-fast:       120ms ease;
  --t-base:       200ms ease;
}