/* === Design Tokens === */
:root {
  /* Cloudflare brand */
  --cf-orange: #F38020;
  --cf-orange-light: #F6A355;
  --cf-orange-dark: #D06A10;

  /* Backgrounds */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1c2333;
  --bg-card: #161b22;
  --bg-card-hover: #1c2333;

  /* Text */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;

  /* Borders */
  --border-color: #30363d;
  --border-light: #21262d;

  /* Accent Colors — per node type */
  --color-user: #3B82F6;
  --color-user-bg: rgba(59, 130, 246, 0.12);
  --color-device: #3B82F6;
  --color-device-bg: rgba(59, 130, 246, 0.12);
  --color-cloudflare: #F38020;
  --color-cloudflare-bg: rgba(243, 128, 32, 0.12);
  --color-ai-service: #10B981;
  --color-ai-service-bg: rgba(16, 185, 129, 0.12);
  --color-resource: #8B5CF6;
  --color-resource-bg: rgba(139, 92, 246, 0.12);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-coming-soon: #EAB308;
  --color-coming-soon-bg: rgba(234, 179, 8, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-orange: 0 0 20px rgba(243, 128, 32, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}