/* Chitmunk: Shared Design Tokens */ /* Single source of truth for colors, spacing, typography, radii, shadows */ /* Theme switching via data-theme attribute on */ /* ── Theme-Invariant Tokens ── */ :root { /* Radii */ --radius-xs: 3px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; /* editor default; site overrides to 16px */ --radius-pill: 100px; /* Shadows — overridden per theme below */ /* Transitions */ --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Spacing (8pt grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Type scale */ --text-xs: 10px; --text-sm: 11px; --text-base: 13px; --text-md: 14px; --text-lg: 15px; --text-xl: 16px; } /* ── Light Theme (default) ── */ :root, [data-theme="light"] { color-scheme: light; /* Backgrounds */ --bg: #FFFFFF; --bg-primary: #FFFFFF; --bg-secondary: #F7F6F3; --bg-panel: #FAFAF8; --bg-input: #F0EFEC; --bg-elevated: #F0EFEC; --bg-tertiary: #E8E5E0; --bg-card: #FFFFFF; --bg-card-hover: #F7F6F3; --bg-canvas: #E8E5E0; --bg-hover: rgba(0, 0, 0, 0.04); --bg-hover-strong: rgba(0, 0, 0, 0.07); /* Accent (warm amber — shared across themes) */ --accent: #E8913A; --accent-hover: #D5802E; --accent-glow: rgba(232, 145, 58, 0.12); --accent-dim: rgba(232, 145, 58, 0.06); --accent-bg: rgba(232, 145, 58, 0.10); --accent-light: #FDF5EC; /* Text */ --text: #1A1815; --text-secondary: #4A453D; --text-muted: #7A7368; --text-dim: #9C9588; /* Borders */ --border: #E8E5E0; --border-subtle: #F0EDEA; --border-light: #E0DDD8; /* Feedback */ --danger: #DC3545; --danger-dim: rgba(220, 53, 69, 0.08); --success: #28A745; --success-dim: rgba(40, 167, 69, 0.08); --warning: #E8913A; --warning-dim: rgba(232, 145, 58, 0.08); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); } /* ── Dark Theme ── */ [data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --bg: #12110F; --bg-primary: #12110F; --bg-secondary: #1C1A16; --bg-panel: #181613; --bg-input: #0D0C0A; --bg-elevated: #242018; --bg-tertiary: #2A2620; --bg-card: #1C1A17; --bg-card-hover: #242120; --bg-canvas: #12110F; --bg-hover: rgba(255, 255, 255, 0.06); --bg-hover-strong: rgba(255, 255, 255, 0.10); /* Accent (warm amber) */ --accent: #E8913A; --accent-hover: #EDA355; --accent-glow: rgba(232, 145, 58, 0.15); --accent-dim: rgba(232, 145, 58, 0.08); --accent-bg: rgba(232, 145, 58, 0.12); --accent-light: #F0B060; /* Text */ --text: #E8E4DE; --text-secondary: #CCC6BC; --text-muted: #B8B2A8; --text-dim: #908880; /* Borders */ --border: #3A3428; --border-subtle: #282318; --border-light: #3D3733; /* Feedback */ --danger: #f0465a; --danger-dim: rgba(240, 70, 90, 0.12); --success: #34d68a; --success-dim: rgba(52, 214, 138, 0.15); --warning: #f5a623; --warning-dim: rgba(245, 166, 35, 0.10); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55); }