/* Creytix design tokens — GENERATED, DO NOT HAND-EDIT.
 * Source of truth: brand/creytix/VISUAL_DNA.md
 * Rebuild: npm run creytix:tokens:build  ·  Re-sync: npm run creytix:tokens:sync-tools
 */
:root,
.brand-creytix {
  --ctx-color-background: #0D1117; /* Page / app shell */
  --ctx-color-surface: #131A22; /* Panels */
  --ctx-color-surface-2: #18212C; /* Nested panels */
  --ctx-color-elevated: #1D2835; /* Modals, drawers */
  --ctx-color-border: #2A3645; /* Dividers */
  --ctx-color-primary-text: #E8EEF5; /* Headlines on dark */
  --ctx-color-muted-text: #A6B3C2; /* Supporting copy */
  --ctx-color-faint-text: #748191; /* Metadata */
  --ctx-color-brand-accent: #14B8A6; /* CTAs · platform · Guide */
  --ctx-color-accent-hover: #0F9486; /* Hover states */
  --ctx-color-guide-tint: #7FD7CD; /* Hint/helper surfaces */
  --ctx-color-warning: #F59E0B; /* Alerts */
  --ctx-color-error: #EF4444; /* Blockers */
  --ctx-color-success: #22C55E; /* Pass states */
  --ctx-color-ai-accent: #7C83FF; /* AI panels/buttons only */
  --ctx-color-ai-glow: #5CC8FF; /* AI glow moments only */
  --ctx-font-display: "Satoshi", "General Sans", "Inter Tight", system-ui, sans-serif;
  --ctx-font-body: "Inter", "Satoshi", "Work Sans", system-ui, sans-serif;
  --ctx-space-0: 0px;
  --ctx-space-1: 4px;
  --ctx-space-2: 8px;
  --ctx-space-3: 12px;
  --ctx-space-4: 16px;
  --ctx-space-5: 20px;
  --ctx-space-6: 24px;
  --ctx-space-8: 32px;
  --ctx-space-10: 40px;
  --ctx-space-12: 48px;
  --ctx-space-16: 64px;
  --ctx-space-20: 80px;
  --ctx-space-24: 96px;
}