# Design System for Poker Hand Predictor Dashboard

This document defines the visual system, typography, colors, layout, and components used to build the Poker Hand Predictor & Evaluator web application.

---

## 1. Color Palette

The color system is designed for a premium, high-fidelity dark poker dashboard theme with vibrant accent highlights.

### Brand Colors
- **Primary (Card Crimson)**: `hsl(342, 85%, 48%)` — Used for active states, primary actions, and Heart/Diamond card suits.
- **Secondary (Midnight Blue)**: `hsl(220, 40%, 12%)` — Used for main container backgrounds.
- **Accent (Spade Gold)**: `hsl(45, 90%, 55%)` — Used for special hand indicators, victory highlights, and high-rank cards.

### Neutrals
- **Background (Deep Obsidian)**: `hsl(222, 47%, 7%)` — The main application background.
- **Surface (Sleek Charcoal)**: `hsl(220, 30%, 16%)` — Card components, selectors, and modals.
- **Surface Muted**: `hsl(220, 25%, 22%)` — Hover states, disabled inputs, borders.
- **Text Primary**: `hsl(210, 40%, 98%)` — Headers, labels, primary text.
- **Text Secondary**: `hsl(215, 20%, 65%)` — Secondary text, sub-labels.

### Semantic Colors
- **Success (Emerald Green)**: `hsl(142, 70%, 45%)` — High confidence predictions, true hand matches.
- **Warning (Amber)**: `hsl(35, 90%, 50%)` — Discrepancies between ML and True evaluator.
- **Info (Indigo)**: `hsl(245, 75%, 60%)` — Informational popovers and tutorial steps.

---

## 2. Typography

We use the Google Font **"Outfit"** for headings and interactive UI elements, and **"Inter"** for body copy.

- **Title (H1)**: `2.5rem (40px)` / Semi-Bold (`600`) / Line-height: `1.2`
- **Section Heading (H2)**: `1.75rem (28px)` / Semi-Bold (`600`) / Line-height: `1.3`
- **Sub-heading (H3)**: `1.25rem (20px)` / Medium (`500`) / Line-height: `1.4`
- **Body Text**: `1rem (16px)` / Regular (`400`) / Line-height: `1.6`
- **Card Font**: `1.5rem (24px)` / Bold (`700`) / Monospace-fallback for ranks.

---

## 3. Shadows & Blur (Glassmorphism)

- **Drop Shadow (Low)**: `0 4px 6px -1px rgba(0, 0, 0, 0.3)`
- **Drop Shadow (Medium)**: `0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.4)`
- **Glow Shadow (Primary)**: `0 0 20px 2px rgba(244, 18, 88, 0.3)`
- **Glass Card Backdrop**: `backdrop-filter: blur(12px); background-color: rgba(22, 28, 45, 0.7);`

---

## 4. Components

### A. Playing Cards (Interactive CSS/SVG)
- **Dimensions**: Aspect ratio `2.5 : 3.5` (typically width `100px`, height `140px`).
- **Rounded Corners**: `border-radius: 12px`
- **Hover Micro-animation**: Slide up by `8px` and add drop shadow on hover.
- **Suit Colors**:
  - Hearts/Diamonds: Card Crimson (`hsl(342, 85%, 48%)`)
  - Spades/Clubs: Text Primary / Dark Grey (`hsl(210, 40%, 98%)` / `hsl(220, 20%, 30%)`)

### B. Controls & Inputs
- **Buttons**:
  - Primary: Filled gradient from Card Crimson to HSL(330, 80%, 40%) with hover scale of `1.03`.
  - Secondary: Ghost outline with midnight blue background.
- **Select Inputs**: Glassmorphic input fields with border highlights on focus.

### C. Evaluation Panels
- Dual columns comparing:
  - **AI Prediction**: Confidence bars/pies in emerald green.
  - **Deterministic Rules**: Badge indicators with HSL themed borders.