# SMK Family — Color Palette

Dark-first, warm, family-friendly. Deep charcoal/navy grounds with warm amber & coral accents.
No harsh neon, no cold corporate blues.

## Semantic tokens

| Token | Hex | Usage |
|-------|-----|-------|
| `smk-bg` | `#14161B` | App background (deep warm charcoal) |
| `smk-bg-alt` | `#1A1E28` | Raised background / panels |
| `smk-surface` | `#232838` | Cards, nav, dialogs |
| `smk-surface-2` | `#2A3040` | Hover, input fills |
| `smk-border` | `#333A4A` | Hairlines, dividers |
| `smk-text` | `#F5F0E6` | Primary text (warm off-white) |
| `smk-text-dim` | `#B9B2A6` | Secondary text (warm taupe) |
| `smk-text-faint` | `#8A8579` | Muted / disabled text |
| `smk-amber` | `#F2A65A` | **Primary accent** — friendly warmth |
| `smk-amber-dark` | `#B35A2E` | Dark amber — accents on light surfaces, hover states |
| `smk-coral` | `#E8755D` | Secondary accent — sunset energy |
| `smk-sage` | `#A3C585` | Success / positive (soft green) |
| `smk-rose` | `#D98A8A` | Warning / destructive (warm, not red-alarm) |
| `smk-cream` | `#FBF6EC` | Icon fills (heart/sparkle), warm highlight |
| `smk-white-soft` | `rgba(255,255,255,0.14)` / `#FFFFFF` @ 14% opacity | Subtle inner highlight ring on the badge |

## Gradients

- **Primary logo gradient**: `#F2A65A` (amber) → `#E8755D` (coral), top-left → bottom-right.
- **Background wash**: `#14161B` → `#1A1E28` → `#232838`, with a low-opacity amber radial glow top-right and coral blobs at low opacity for depth.

## Dark-first rules

1. Default surface is always dark. Light mode is an explicit opt-in, never default.
2. Never use pure black (`#000000`) — `#14161B` reads softer and keeps warm undertone.
3. Never use pure white — `#F5F0E6` keeps text warm and reduces glare.
4. Accent usage: amber for interactive/primary, coral for highlights/brand moments, sage for success states only.
5. Contrast: `smk-text` on `smk-bg` = ~12.4:1. `smk-text-dim` on `smk-bg` = ~6.3:1 (AA OK for body).
6. 3:1 minimum contrast for large text / UI components with accents.

## Accessibility

- Don't rely on color alone — pair amber with icons/shapes.
- Focus rings: 2px `smk-amber` outline with 2px `smk-bg` gap.