/**
 * Coinbase design-system tokens for Botworks.
 * Source: DESIGN-coinbase.md
 *
 * IMPORTANT: Do not override page layout classes (.bw-btn, .bw-h1, grids, etc.).
 * Existing page HTML ships its own embedded <style> — we only expose tokens
 * and remap the CSS variables those styles already use.
 */

:root {
	/* Brand */
	--bw-primary: #0052ff;
	--bw-primary-active: #003ecc;
	--bw-primary-disabled: #a8b8cc;

	/* Text */
	--bw-ink: #0a0b0d;
	--bw-body: #5b616e;
	--bw-body-strong: #0a0b0d;
	--bw-muted: #7c828a;
	--bw-muted-soft: #a8acb3;

	/* Surfaces */
	--bw-canvas: #ffffff;
	--bw-surface-soft: #f7f7f7;
	--bw-surface-card: #ffffff;
	--bw-surface-strong: #eef0f3;
	--bw-surface-dark: #0a0b0d;
	--bw-surface-dark-elevated: #16181c;
	--bw-hairline: #dee1e6;
	--bw-hairline-soft: #eef0f3;

	/* On-color */
	--bw-on-primary: #ffffff;
	--bw-on-dark: #ffffff;
	--bw-on-dark-soft: #a8acb3;

	/* Semantic / accent */
	--bw-semantic-up: #05b169;
	--bw-semantic-down: #cf202f;
	--bw-accent-yellow: #f4b000;

	/* Radius */
	--bw-radius-xs: 4px;
	--bw-radius-sm: 8px;
	--bw-radius-md: 12px;
	--bw-radius-lg: 16px;
	--bw-radius-xl: 24px;
	--bw-radius-pill: 100px;

	/* Spacing */
	--bw-space-xxs: 4px;
	--bw-space-xs: 8px;
	--bw-space-sm: 12px;
	--bw-space-base: 16px;
	--bw-space-md: 20px;
	--bw-space-lg: 24px;
	--bw-space-xl: 32px;
	--bw-space-xxl: 48px;
	--bw-space-section: 96px;

	/* Typography */
	--bw-font-heading: "DM Sans", system-ui, -apple-system, sans-serif;
	--bw-font-body: "DM Sans", system-ui, -apple-system, sans-serif;

	/* Aliases used by footer token remap */
	--bw-primary-deep: var(--bw-primary-active);
	--bw-ink-secondary: var(--bw-body);
	--bw-ink-mute: var(--bw-muted);
	--bw-canvas-soft: var(--bw-surface-soft);
	--bw-primary-subdued: var(--bw-surface-strong);
}

/*
 * Remap legacy Botworks CSS variables (used inside page <style> blocks)
 * to Coinbase design-system colors — layout rules stay untouched.
 */
.bw {
	--blue: var(--bw-primary);
	--blue2: var(--bw-primary-active);
	--ink: var(--bw-ink);
	--slate: var(--bw-body);
	--mute: var(--bw-muted);
	--line: var(--bw-hairline);
	--soft: var(--bw-surface-soft);
	--soft2: var(--bw-surface-strong);
}