/* @bchen/ui v0.1.0 — semantic token palette * Canonical light + dark values extracted from the bchen.dev fleet. * Source of truth: inventory (cross-checked against authd, buchinese). */ :root { /* Primitive palette */ --black: #000; --white: #fff; --gray-50: #fafafa; --gray-100: #f0f0f0; --gray-200: #e0e0e0; --gray-400: #999; --gray-600: #555; --red: #c00; /* Typography */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Layout */ --radius: 0; --header-height: 48px; /* Border tokens */ --border-color: var(--gray-200); --border-strong: var(--black); --border: 1px solid var(--border-strong); /* Semantic color tokens */ --fg: var(--black); --fg-muted: var(--gray-600); --bg: var(--white); --bg-elevated: var(--gray-50); --surface: var(--white); --accent: var(--black); --accent-fg: var(--white); --accent-hover: var(--gray-600); --danger: var(--red); --danger-fg: var(--white); --danger-bg: #fff5f5; --warning: var(--gray-600); /* Input tokens */ --input-bg: var(--white); --input-fg: var(--black); --input-border: var(--black); --input-bg-focus: var(--gray-50); } @media (prefers-color-scheme: dark) { :root { --bg: #0f1115; --bg-elevated: #1a1d23; --surface: #0f1115; --fg: #e5e7eb; --fg-muted: #9ca3af; --border-color: #374151; --border-strong: #6b7280; --accent: #e5e7eb; --accent-fg: #0f1115; --accent-hover: #cbd5e1; --danger: #f87171; --danger-fg: #0f1115; --danger-bg: rgba(248, 113, 113, 0.12); --input-bg: #1a1d23; --input-fg: #e5e7eb; --input-border: #6b7280; --input-bg-focus: #0f1115; } }