:root {
  /* spacing */
  --sp: 8px;
  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* colors */
  --c-bg: #1E1E1E;               /* panel background */
  --c-panel: #252526;            /* sidebar/header */
  --c-card: #2D2D30;             /* asset cards */
  --c-card-hover: #34343A;       /* hover state */
  --c-accent: #2680EB;           /* Adobe blue */
  --c-text-primary: #FFFFFF;
  --c-text-secondary: #A8A8A8;
  --c-muted: #727272;
  --c-border: rgba(255,255,255,0.06);
  /* shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
  /* typography */
  --font-base: "Inter", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --size-title: 14px;   /* semi‑bold */
  --size-label: 12px;   /* medium */
  --size-meta: 11px;    /* regular */
}

/* utility helpers */
.mt-1 { margin-top: var(--sp); }
.mb-1 { margin-bottom: var(--sp); }
.ml-1 { margin-left: var(--sp); }
.mr-1 { margin-right: var(--sp); }
.p-1 { padding: var(--sp); }
.p-2 { padding: calc(var(--sp) * 2); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-primary { color: var(--c-text-primary); }
.text-secondary { color: var(--c-text-secondary); }
.text-muted { color: var(--c-muted); }