:root{
  /* ===== Brand palette (edit these once) ===== */
  --xcp-bg: #ffffff;
  --xcp-surface: #f4f6f8;
  --xcp-surface-2: #eef2f6;

  --xcp-text: #111111;
  --xcp-text-2: rgba(17,17,17,.72);
  --xcp-muted: rgba(17,17,17,.55);

  /* DJI-like dark bar */
  --xcp-dark: #081a27;
  --xcp-dark-2: #0a202f;
  --xcp-dark-3: #0c2433;

  /* Accent / CTA */
  --xcp-accent: #0b62ff;
  --xcp-accent-2: #2b7bff;

  /* Borders / shadows */
  --xcp-border: rgba(0,0,0,.08);
  --xcp-border-dark: rgba(255,255,255,.10);

  --xcp-shadow: 0 18px 40px rgba(0,0,0,.10);
}

html, body{
  background: var(--xcp-bg);
  color: var(--xcp-text);
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

a{
  color: var(--xcp-accent);
}

a:hover{
  color: var(--xcp-accent-2);
}

/* default cards/sections */
.xcp_surface{
  background: var(--xcp-surface);
  border: 1px solid var(--xcp-border);
  border-radius: 12px;
}