# Rounded — Complete Design System
> Version 1.0 · Derived from Theme 03 — Rounded

---

## Table of Contents

1. [System Overview](#1-system-overview)
2. [CSS Custom Properties — Master Token Sheet](#2-css-custom-properties--master-token-sheet)
3. [Color Palette](#3-color-palette)
4. [Typography System](#4-typography-system)
5. [Spacing System](#5-spacing-system)
6. [Border Radius System](#6-border-radius-system)
7. [Shadow & Elevation System](#7-shadow--elevation-system)
8. [Component Specifications](#8-component-specifications)
9. [Layout & Grid System](#9-layout--grid-system)
10. [Animation & Transition Tokens](#10-animation--transition-tokens)
11. [Z-Index System](#11-z-index-system)
12. [Breakpoints](#12-breakpoints)
13. [Icon System](#13-icon-system)
14. [State Definitions](#14-state-definitions)

---

## 1. System Overview

**Design Language:** Rounded  
**Aesthetic Family:** Friendly modernism, cool blue-grey tones, generous curves, high-contrast weight pairings  
**Personality:** Approachable, confident, clean — communicates trustworthiness through softness rather than rigidity  
**Best Suited For:** SaaS products, productivity apps, developer tools, dashboards, consumer-facing platforms, team collaboration software, subscription services, B2C interfaces

**Core Principles:**
- Curved surfaces over sharp edges — everything reads as touchable and friendly
- Blue as the primary action signal — confident, clear, universally understood
- High typographic weight contrast — 800/900 display weight alongside 400 body
- Cool blue-grey backgrounds that recede cleanly behind content
- White surfaces for all interactive containers — maximum clarity
- Generous padding that gives content room to breathe
- Pill and capsule shapes reserved for interactive affordances (badges, toggles)

---

## 2. CSS Custom Properties — Master Token Sheet

Paste this block into the `:root` of every project using this system.

```css
:root {

  /* ─── COLOR: BACKGROUNDS ─────────────────────────────────────── */
  --color-bg-base:          #f0f4f8;   /* Page / app background */
  --color-bg-surface:       #ffffff;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #ffffff;   /* Inputs, modals, popups */
  --color-bg-sunken:        #f8fafc;   /* Table headers, inset areas */
  --color-bg-overlay:       rgba(15, 23, 42, 0.5);  /* Modal backdrop */
  --color-bg-hover-row:     #f8fafc;   /* Table row hover */

  /* ─── COLOR: BLUE ACCENT ─────────────────────────────────────── */
  --color-blue-50:          #eff6ff;   /* Lightest tint — hover wash */
  --color-blue-100:         #dbeafe;   /* Selection highlight */
  --color-blue-300:         #93c5fd;   /* Light blue — disabled accent */
  --color-blue-500:         #3b82f6;   /* Primary accent */
  --color-blue-600:         #2563eb;   /* Darker blue — hover, pressed */
  --color-blue-700:         #1d4ed8;   /* Deep blue — active links */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #0f172a;   /* Near-black — headings, high emphasis */
  --color-text-secondary:   #1e293b;   /* Dark slate — body, secondary */
  --color-text-tertiary:    #475569;   /* Medium slate — labels, captions */
  --color-text-muted:       #64748b;   /* Muted slate — timestamps, metadata */
  --color-text-disabled:    #94a3b8;   /* Disabled state text */
  --color-text-inverse:     #ffffff;   /* On dark/blue backgrounds */
  --color-text-placeholder: #94a3b8;   /* Input placeholder */
  --color-text-accent:      #2563eb;   /* Blue text — links, active states */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-light:     #f1f5f9;   /* Hairline — table row separators */
  --color-border-default:   #e2e8f0;   /* Default — inputs, cards, containers */
  --color-border-medium:    #cbd5e1;   /* Stronger — hover state borders */
  --color-border-accent:    #3b82f6;   /* Focus — blue border on inputs */

  /* ─── COLOR: INTERACTIVE SURFACES ───────────────────────────── */
  --color-btn-primary-bg:       #3b82f6;
  --color-btn-primary-text:     #ffffff;
  --color-btn-primary-hover:    #2563eb;
  --color-btn-primary-shadow:   rgba(59, 130, 246, 0.30);

  --color-btn-secondary-bg:     #f1f5f9;
  --color-btn-secondary-text:   #1e293b;
  --color-btn-secondary-border: #e2e8f0;
  --color-btn-secondary-hover:  #e2e8f0;

  --color-btn-outline-text:     #3b82f6;
  --color-btn-outline-border:   #3b82f6;
  --color-btn-outline-hover:    #eff6ff;

  --color-btn-destructive-bg:   #ef4444;
  --color-btn-destructive-text: #ffffff;
  --color-btn-destructive-hover:#dc2626;
  --color-btn-destructive-shadow: rgba(239, 68, 68, 0.30);

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #16a34a;
  --color-success-bg:       #dcfce7;
  --color-success-border:   #86efac;
  --color-warning:          #ca8a04;
  --color-warning-bg:       #fef9c3;
  --color-warning-border:   #fde047;
  --color-error:            #dc2626;
  --color-error-bg:         #fee2e2;
  --color-error-border:     #fca5a5;
  --color-info:             #2563eb;
  --color-info-bg:          #dbeafe;
  --color-info-border:      #93c5fd;
  --color-violet:           #7c3aed;
  --color-violet-bg:        #f3e8ff;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-serif:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:     'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-lg:    0.9375rem;  /* 15px */
  --text-xl:    1rem;       /* 16px */
  --text-2xl:   1.125rem;   /* 18px */
  --text-3xl:   1.375rem;   /* 22px */
  --text-4xl:   2rem;       /* 32px */
  --text-5xl:   3rem;       /* 48px */

  /* ─── TYPOGRAPHY: WEIGHTS ────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-base:    1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.01em;
  --tracking-wider:    0.06em;
  --tracking-widest:   0.10em;

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-18:  36px;
  --space-20:  40px;
  --space-24:  48px;
  --space-28:  56px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     5px;    /* Tight rounding — table cells, inner elements */
  --radius-sm:     8px;    /* Small badges */
  --radius-md:     10px;   /* Inputs, buttons — primary interactive radius */
  --radius-lg:     12px;   /* Cards, modals, containers — primary container radius */
  --radius-xl:     16px;   /* Large panels, overlay menus */
  --radius-2xl:    20px;   /* Pill-adjacent — featured modals */
  --radius-full:   9999px; /* True pills — status tags, count badges */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:      0 4px 12px rgba(59, 130, 246, 0.10);
  --shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.15);
  --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal:   0 24px 64px rgba(0, 0, 0, 0.15);
  --shadow-input-focus: 0 0 0 3px rgba(59, 130, 246, 0.12);
  --shadow-btn-primary: 0 4px 12px rgba(59, 130, 246, 0.30);
  --shadow-btn-destructive: 0 4px 12px rgba(239, 68, 68, 0.30);

  /* ─── ANIMATION ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --duration-instant:  50ms;
  --duration-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  400ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-xs:    380px;
  --container-sm:    480px;
  --container-md:    640px;
  --container-lg:    800px;
  --container-xl:   1040px;
  --container-2xl:  1200px;
  --container-3xl:  1440px;

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-top:      999;

}
```

---

## 3. Color Palette

### 3.1 Background Colors

| Token | Hex | RGB | Use |
|-------|-----|-----|-----|
| `--color-bg-base` | `#f0f4f8` | 240, 244, 248 | Page-level background |
| `--color-bg-surface` | `#ffffff` | 255, 255, 255 | Cards, panels, all containers |
| `--color-bg-elevated` | `#ffffff` | 255, 255, 255 | Modals, inputs, popups |
| `--color-bg-sunken` | `#f8fafc` | 248, 250, 252 | Table headers, inset areas |
| `--color-bg-overlay` | `rgba(15,23,42,0.5)` | — | Modal backdrop scrim |

### 3.2 Blue Accent Scale

| Token | Hex | Use |
|-------|-----|-----|
| `--color-blue-50` | `#eff6ff` | Hover background wash on outline elements |
| `--color-blue-100` | `#dbeafe` | Info badge background, selection highlight |
| `--color-blue-500` | `#3b82f6` | **Primary accent** — buttons, focus rings, links |
| `--color-blue-600` | `#2563eb` | Hover state for primary button |
| `--color-blue-700` | `#1d4ed8` | Active / pressed primary state |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#0f172a` | All headings, display, high-emphasis |
| `--color-text-secondary` | `#1e293b` | Main body copy, secondary UI |
| `--color-text-tertiary` | `#475569` | Labels, captions, helper text |
| `--color-text-muted` | `#64748b` | Timestamps, metadata, placeholder |
| `--color-text-disabled` | `#94a3b8` | Disabled state text |
| `--color-text-inverse` | `#ffffff` | On blue or dark backgrounds |
| `--color-text-accent` | `#2563eb` | Hyperlinks, active nav items |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-light` | `#f1f5f9` | Row separators, hairline rules |
| `--color-border-default` | `#e2e8f0` | Default input, card edge |
| `--color-border-medium` | `#cbd5e1` | Hover state border |
| `--color-border-accent` | `#3b82f6` | Focus state, active input |

### 3.5 Semantic Colors

| State | Text | Background | Border |
|-------|------|------------|--------|
| Success | `#16a34a` | `#dcfce7` | `#86efac` |
| Warning | `#ca8a04` | `#fef9c3` | `#fde047` |
| Error | `#dc2626` | `#fee2e2` | `#fca5a5` |
| Info | `#2563eb` | `#dbeafe` | `#93c5fd` |
| Violet / Beta | `#7c3aed` | `#f3e8ff` | `#c4b5fd` |

---

## 4. Typography System

### 4.1 Font Families

**Display & Body / UI — `'Plus Jakarta Sans'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap')`
- Fallback: `'Segoe UI', system-ui, sans-serif`
- Weights used: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold)
- Character: Geometric, modern, highly legible — large x-height, open apertures
- Usage: Everything — display headings at 800, body at 400, buttons at 600

**Editorial Accent — `'Lora'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap')`
- Fallback: `Georgia, 'Times New Roman', serif`
- Weights used: 400 (Regular), 600 (SemiBold), both in italic
- Character: Contemporary serif — editorial warmth, rounded serifs, fluid curves
- Usage: Subheadings (H2–H3 context), pull quotes, editorial captions, `<blockquote>`, section accents

---

### 4.2 Type Scale — Full Specification

#### Display (Plus Jakarta Sans — high weight)

| Role | Size Token | Size (rem/px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------------|----------------|------|
| Hero Display | `--text-5xl` | 3rem / 48px | 800 | 1.0 | -0.03em | Plus Jakarta Sans |
| Page Title | `--text-4xl` | 2rem / 32px | 700 | 1.15 | -0.02em | Plus Jakarta Sans |
| Section Title | `--text-3xl` | 1.375rem / 22px | 700 | 1.2 | -0.01em | Plus Jakarta Sans |
| Serif Subhead | `--text-3xl` | 1.375rem / 22px | 600 | 1.35 | 0em | Lora |
| Modal Title | `--text-2xl` | 1.125rem / 18px | 800 | 1.2 | -0.01em | Plus Jakarta Sans |

#### Body / UI (Plus Jakarta Sans — mid weight)

| Role | Size Token | Size (rem/px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------------|----------------|------|
| Large Body | `--text-lg` | 0.9375rem / 15px | 400 | 1.65 | 0em | Plus Jakarta Sans |
| Base Body | `--text-md` | 0.875rem / 14px | 400 | 1.65 | 0em | Plus Jakarta Sans |
| Small Body | `--text-base` | 0.8125rem / 13px | 400 | 1.5 | 0em | Plus Jakarta Sans |
| Caption | `--text-sm` | 0.75rem / 12px | 400 | 1.5 | 0em | Plus Jakarta Sans |
| Caption Serif | `--text-md` | 0.875rem / 14px | 400 | 1.6 | 0em | Lora italic |
| Button Large | `--text-md` | 0.875rem / 14px | 600 | 1 | 0.01em | Plus Jakarta Sans |
| Button Base | `--text-base` | 0.8125rem / 13px | 600 | 1 | 0.01em | Plus Jakarta Sans |
| Button Small | `--text-xs` | 0.6875rem / 11px | 600 | 1 | 0.02em | Plus Jakarta Sans |
| Label | `--text-base` | 0.8125rem / 13px | 600 | 1 | 0.01em | Plus Jakarta Sans |
| Nav Item | `--text-md` | 0.875rem / 14px | 500 | 1 | 0em | Plus Jakarta Sans |

#### Metadata

| Role | Size Token | Size (rem/px) | Weight | Transform | Letter Spacing |
|------|-----------|---------------|--------|-----------|----------------|
| Section Eyebrow | `--text-xs` | 0.6875rem / 11px | 600 | uppercase | 0.08em |
| Badge / Tag | `--text-xs` | 0.6875rem / 11px | 700 | none | 0em |
| Pill Count | `--text-xs` | 0.6875rem / 11px | 700 | none | 0em |
| Table Header | `--text-xs` | 0.6875rem / 11px | 700 | uppercase | 0.06em |
| Timestamp / Meta | `--text-sm` | 0.75rem / 12px | 400 | none | 0em |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* 48px */
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 32px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);       /* 22px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0em;
  color: var(--color-text-secondary);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);        /* 16px */
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
}

h5 {
  font-family: var(--font-display);
  font-size: var(--text-md);        /* 14px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
}

h6 {
  font-family: var(--font-display);
  font-size: var(--text-base);      /* 13px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-tertiary);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-md);        /* 14px */
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-tertiary);
}

.serif-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
}

label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-tertiary);
}
```

---

## 5. Spacing System

Based on a 4px base unit with stepped intervals.

### 5.1 Base Scale Table

| Token | Value | Pixels | Common Use |
|-------|-------|--------|------------|
| `--space-1` | 2px | 2 | Icon-to-text micro gap |
| `--space-2` | 4px | 4 | Between badge and text |
| `--space-3` | 6px | 6 | Label-to-helper text |
| `--space-4` | 8px | 8 | Badge padding V, compact gap |
| `--space-5` | 10px | 10 | Badge padding H |
| `--space-6` | 12px | 12 | Gap between nav items |
| `--space-7` | 14px | 14 | Input border compensation |
| `--space-8` | 16px | 16 | Standard gap, card inner section |
| `--space-10` | 20px | 20 | Grid gap, form field gap |
| `--space-12` | 24px | 24 | Card padding, modal padding |
| `--space-14` | 28px | 28 | Card padding large |
| `--space-16` | 32px | 32 | Section break, page sections |
| `--space-18` | 36px | 36 | Modal padding large |
| `--space-20` | 40px | 40 | Page header bottom |
| `--space-24` | 48px | 48 | Hero padding, page spacing |

---

### 5.2 Component Spacing Specifications

#### Modal
```
padding-all:         32px  (--space-16)
title-bottom:         6px
description-bottom:  20px
input-bottom:        12px
button-gap:          10px
border-radius:       16px  (--radius-xl)
max-width:          480px
```

#### Card
```
padding-all:          24px  (--space-12)
inner-section-gap:    16px  (--space-8)
border-radius:        12px  (--radius-lg)
```

#### Button
```
height-large:         44px
height-base:          40px
height-small:         30px

padding-v-large:      12px
padding-v-base:       10px
padding-v-small:       7px

padding-h-large:      24px
padding-h-base:       20px
padding-h-small:      14px

border-radius:        10px  (--radius-md)
```

#### Input / Textarea
```
padding-v:            10px  (--space-5)
padding-h:            14px  (--space-7)
border-radius:        10px  (--radius-md)
border-width:          1.5px
focus-shadow:          0 0 0 3px rgba(59,130,246,0.12)
```

#### Table
```
header-padding-v:     12px
header-padding-h:     16px
cell-padding-v:       12px
cell-padding-h:       16px
border-radius:        12px (container)
```

#### Badge / Tag
```
padding-v:            3px
padding-h:           10px
border-radius:       20px  (pill — primary badge shape)
font-size:           11px
font-weight:          700
```

#### Dropdown Menu
```
margin-top:           4px
item-padding:        10px 14px
item-border-radius:   8px  (inner items)
menu-border-radius:  12px  (menu container)
inner-padding:        4px  (around items)
```

---

## 6. Border Radius System

The Rounded system is defined by its generous curves. Everything feels soft and clickable.

| Token | Value | Where Used |
|-------|-------|-----------|
| `--radius-none` | 0px | Horizontal rules, dividers only |
| `--radius-xs` | 5px | Checkbox, radio, small inline elements |
| `--radius-sm` | 8px | Inline action buttons in tables, small chips |
| `--radius-md` | 10px | **PRIMARY interactive** — all inputs, all buttons, all selects |
| `--radius-lg` | 12px | **PRIMARY containers** — all cards, panels, standard modals |
| `--radius-xl` | 16px | Dropdown panels, overlay menus, larger modals |
| `--radius-2xl` | 20px | Hero modals, featured surfaces |
| `--radius-full` | 9999px | Badge pills, count indicators, toggle switches |

**Radius Budget Rules:**
- Default to `--radius-md` (10px) for all interactive components
- Default to `--radius-lg` (12px) for all containers
- Pill (`--radius-full`) is appropriate for badges and status indicators
- Pill shape on buttons is allowed as a variant — `border-radius: 20px`

---

## 7. Shadow & Elevation System

### 7.1 Elevation Levels

| Level | Token | Value | Use |
|-------|-------|-------|-----|
| 0 — Flat | `--shadow-none` | none | Base content, no elevation |
| 1 — Raised | `--shadow-xs` | `0 1px 2px rgba(0,0,0,0.05)` | Minor raised elements |
| 2 — Card | `--shadow-card` | `0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06)` | Cards, panels |
| 3 — Float | `--shadow-lg` | `0 12px 32px rgba(0,0,0,0.10)` | Dropdown, select panel |
| 4 — Modal | `--shadow-modal` | `0 24px 64px rgba(0,0,0,0.15)` | Modals and dialogs |
| 5 — Button | `--shadow-btn-primary` | `0 4px 12px rgba(59,130,246,0.30)` | Primary button hover |

### 7.2 Button Hover Shadows

Primary and destructive buttons gain a colored shadow on hover — this is a defining system detail:

```css
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30);
}
.btn-destructive:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}
```

### 7.3 Focus Ring Shadow

Inputs use a ring shadow (not a border change) for focus state:

```css
input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
```

### 7.4 Shadow Color Logic

Unlike warm-toned systems, Rounded uses neutral shadow colors (`rgba(0,0,0,...)`) to stay cool and clean. The blue-tinted shadows are reserved exclusively for interactive feedback (button hover, focus ring).

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: #ffffff;
  background: #3b82f6;
  border: none;
  border-radius: var(--radius-md);  /* 10px */
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
```

#### Secondary Button
```css
.btn-secondary {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: #1e293b;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover { background: #e2e8f0; }
```

#### Outline Button
```css
.btn-outline {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: #3b82f6;
  background: transparent;
  border: 1.5px solid #3b82f6;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover { background: #eff6ff; }
```

#### Destructive Button
```css
.btn-destructive {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-destructive:hover {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}
```

---

### 8.2 Form Inputs

#### Text Input
```css
.input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  color: #1e293b;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);  /* 10px */
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: all 0.2s;
}
.input::placeholder { color: #94a3b8; }
.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.input:disabled { opacity: 0.4; cursor: not-allowed; }
```

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-body);
  font-size: var(--text-base);   /* 13px */
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  display: block;
}
```

---

### 8.4 Card

```css
.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);  /* 12px */
  padding: 24px;
  box-shadow: var(--shadow-card);
}
```

---

### 8.5 Modal

```css
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.modal {
  background: #ffffff;
  border-radius: var(--radius-xl);   /* 16px */
  box-shadow: var(--shadow-modal);
  max-width: 480px;
  width: 90%;
  padding: 32px;
}
```

---

### 8.6 Badge / Tag

```css
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);    /* 11px */
  font-weight: 700;
  border-radius: 20px;          /* Pill — always */
  padding: 3px 10px;
  white-space: nowrap;
}

.badge-success { background: #dcfce7; color: #16a34a; }
.badge-warning { background: #fef9c3; color: #ca8a04; }
.badge-error   { background: #fee2e2; color: #dc2626; }
.badge-info    { background: #dbeafe; color: #2563eb; }
.badge-violet  { background: #f3e8ff; color: #7c3aed; }
.badge-neutral { background: #f1f5f9; color: #475569; }
```

---

### 8.7 Dropdown Menu

```css
.dropdown-menu {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-lg);   /* 12px */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  margin-top: 4px;
  padding: 4px;
  overflow: hidden;
}

.dropdown-item {
  padding: 10px 14px;
  font-size: var(--text-md);
  cursor: pointer;
  border-radius: 8px;
  margin: 2px;
  transition: background 0.1s;
}
.dropdown-item:hover { background: #eff6ff; color: #3b82f6; }
```

---

### 8.8 Table

```css
.table-container {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-md); }
.table thead { background: #f8fafc; }
.table th {
  color: #475569;
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--color-text-secondary);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f8fafc; }
```

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value | Use |
|-------|-------|-----|
| `--container-xs` | 380px | Micro modals, compact widgets |
| `--container-sm` | 480px | Standard modals, narrow forms |
| `--container-md` | 640px | Content columns |
| `--container-lg` | 800px | Wide panels |
| `--container-xl` | 1040px | Dashboard content |
| `--container-2xl` | 1200px | Page max-width |
| `--container-3xl` | 1440px | Wide desktop |

### 9.2 Column Grid

```css
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-12);
}
```

### 9.3 Standard Layouts

```css
/* Two Equal Columns (most common in cards) */
.layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Content heavy + Sidebar */
.layout-main-aside {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* Stack */
.layout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
```

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16, 1, 0.3, 1)` | Modal entry, panel open |
| `--ease-spring` | `cubic-bezier(0.34, 1.4, 0.64, 1)` | Hover pop, badge appear |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | State changes (bg, border) |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-instant` | 50ms | Press scale feedback |
| `--duration-fast` | 100ms | Row hover, badge hover |
| `--duration-base` | 200ms | All standard state changes |
| `--duration-slow` | 300ms | Modal entry, drawer open |

### 10.3 Standard Transitions

```css
/* Buttons and inputs */
.interactive { transition: all 0.2s; }

/* Button press */
.btn:active { transform: scale(0.98); transition: transform 50ms; }
```

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-below` | -1 | Background decoration |
| `--z-base` | 0 | Normal document flow |
| `--z-raised` | 10 | Slightly elevated cards |
| `--z-dropdown` | 100 | Dropdown menus |
| `--z-sticky` | 200 | Sticky headers |
| `--z-overlay` | 300 | Backdrop overlays |
| `--z-modal` | 400 | Modals and dialogs |
| `--z-toast` | 500 | Toast notifications |
| `--z-tooltip` | 600 | Tooltips |
| `--z-top` | 999 | Emergency override |

---

## 12. Breakpoints

```css
--bp-sm:  480px;
--bp-md:  768px;
--bp-lg:  1024px;
--bp-xl:  1280px;
--bp-2xl: 1440px;

@media (min-width: 480px)  { /* sm+ */ }
@media (min-width: 768px)  { /* md+ */ }
@media (min-width: 1024px) { /* lg+ */ }
@media (min-width: 1280px) { /* xl+ */ }
```

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|------------------------|
| < 480px | 16px |
| 480px–767px | 20px |
| 768px–1023px | 24px |
| 1024px+ | 40px |

---

## 13. Icon System

- **Size scale:** 14px, 15px, 16px, 18px, 20px, 24px
- **Default size:** 16px inline, 20px standalone
- **Stroke weight:** 1.5px — never filled except for semantic status icons
- **Color:** Inherit from parent; use `#94a3b8` for decorative/placeholder icons
- **Library recommendation:** Lucide Icons — consistent stroke, matches geometric feel
- **Alignment:** `vertical-align: middle` when inline with text
- **Gap to text:** 8px (`--space-4`)

```css
.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
}
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background | Shadow |
|-------|--------|------------|--------|
| Default | `#e2e8f0` (1.5px) | `#ffffff` | none |
| Hover | `#cbd5e1` | `#ffffff` | none |
| Focus | `#3b82f6` | `#ffffff` | `0 0 0 3px rgba(59,130,246,0.12)` |
| Disabled | `#e2e8f0` | `#f8fafc` | none, opacity 0.4 |
| Error | `#fca5a5` | `#fff` | `0 0 0 3px rgba(239,68,68,0.12)` |

### 14.2 Button States

| State | Primary Bg | Secondary Bg | Shadow |
|-------|-----------|--------------|--------|
| Default | `#3b82f6` | `#f1f5f9` | none |
| Hover | `#2563eb` | `#e2e8f0` | colored glow |
| Active | scale(0.98) | scale(0.98) | — |
| Disabled | opacity 0.4 | opacity 0.4 | none |

### 14.3 Link States

```css
a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
a:hover { color: #1d4ed8; }
a:visited { color: #7c3aed; }
```

---

*End of Design System — Rounded v1.0*