# Glass — Complete Design System
> Version 1.0 · Derived from the Glass Theme (Theme 09)

---

## 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:** Glass
**Aesthetic Family:** Glassmorphism — frosted, translucent, backdrop-blurred surfaces floating over a soft gradient canvas
**Personality:** Light, airy, modern, premium — communicates clarity and depth without ever feeling clinical
**Best Suited For:** SaaS product marketing sites, onboarding flows, weather/health/finance dashboards, consumer apps that want a soft, premium, "floating glass" feel

**Core Principles:**
- Every surface is translucent. Cards, buttons, inputs, dropdowns, and modals all use `rgba(255,255,255, alpha)` fills combined with `backdrop-filter: blur(...)` — nothing in this system is a flat opaque color.
- The page background is never solid — it is always a soft multi-stop gradient (blue → cyan → mint) that shows through every glass surface, which is what makes the blur legible.
- Radius is large and consumer-friendly: `20px` for surfaces, `9999px` (full pill) for buttons and inputs. Nothing in Glass is sharp.
- Teal (`#0d9488`) is the single accent — used for primary actions, focus rings, and the tiny dot marker before every section title.
- Elevation is expressed through blur intensity and soft, diffuse shadows tinted toward the page's blue undertone (`rgba(31,74,121, alpha)`), never pure black.
- Every interactive surface gets slightly *more* opaque on focus/hover — the glass "clarifies" as you interact with it.

---

## 2. CSS Custom Properties — Master Token Sheet

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

```css
:root {

  /* ─── COLOR: BACKGROUND GRADIENT ─────────────────────────────── */
  --color-bg-grad-start:     #dbeafe;   /* Page gradient stop 1 — soft blue */
  --color-bg-grad-mid:       #e0f2fe;   /* Page gradient stop 2 — sky */
  --color-bg-grad-end:       #f0fdfa;   /* Page gradient stop 3 — mint */
  --color-bg-gradient:       linear-gradient(135deg, var(--color-bg-grad-start) 0%, var(--color-bg-grad-mid) 45%, var(--color-bg-grad-end) 100%);

  /* ─── COLOR: GLASS SURFACES ──────────────────────────────────── */
  --glass-fill-heavy:        rgba(255, 255, 255, 0.75);  /* Dropdown / modal panels */
  --glass-fill-base:         rgba(255, 255, 255, 0.55);  /* Cards, primary surfaces */
  --glass-fill-light:        rgba(255, 255, 255, 0.35);  /* Dashed / low-emphasis buttons */
  --glass-fill-input:        rgba(255, 255, 255, 0.55);  /* Input fields */
  --glass-fill-input-focus:  rgba(255, 255, 255, 0.75);  /* Input fields on focus */
  --glass-border:            rgba(255, 255, 255, 0.7);   /* Card border */
  --glass-border-strong:     rgba(255, 255, 255, 0.9);   /* Dropdown / modal border */
  --glass-blur-sm:           blur(6px);
  --glass-blur-md:           blur(10px);
  --glass-blur-lg:           blur(18px);
  --glass-blur-xl:           blur(20px);

  /* ─── COLOR: TEAL ACCENT ─────────────────────────────────────── */
  --color-teal-100:          rgba(13, 148, 136, 0.06);   /* Table row hover */
  --color-teal-200:          rgba(13, 148, 136, 0.14);   /* Badge / dropdown item hover bg */
  --color-teal-300:          rgba(13, 148, 136, 0.15);   /* Focus ring */
  --color-teal-400:          #0d9488;    /* Primary accent */
  --color-teal-500:          #0ea5b0;    /* Primary button gradient end */
  --color-teal-700:          #0f766e;    /* Deep teal — section titles, labels, link text */
  --color-sky-400:           #38bdf8;    /* Secondary accent — info badge, gradients */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:      #0f2942;   /* Headings — deep navy ink */
  --color-text-secondary:    #1e293b;   /* Body copy */
  --color-text-tertiary:     #3b5670;   /* Captions, header subtitle */
  --color-text-muted:        #5b7690;   /* Secondary text, helper copy */
  --color-text-disabled:     #a0b0be;   /* Disabled state */
  --color-text-inverse:      #ffffff;   /* Text on solid teal / red fills */
  --color-text-placeholder:  #5b7690;   /* Input placeholder */

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:           #22c55e;
  --color-success-bg:        rgba(34, 197, 94, 0.16);
  --color-success-text:      #15803d;
  --color-warning:           #f59e0b;
  --color-warning-bg:        rgba(245, 158, 11, 0.16);
  --color-warning-text:      #b45309;
  --color-error:             #dc2626;
  --color-error-bg:          rgba(220, 38, 38, 0.16);
  --color-error-text:        #b91c1c;
  --color-info:              #38bdf8;
  --color-info-bg:           rgba(56, 189, 248, 0.18);
  --color-info-text:         #0369a1;
  --color-neutral-bg:        rgba(148, 163, 184, 0.2);
  --color-neutral-text:      #475569;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.6875rem;  /* 11px */
  --text-xs:    0.71875rem; /* 11.5px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-md-lg: 0.90625rem; /* 14.5px */
  --text-lg:    0.9375rem;  /* 15px */
  --text-xl:    1.0625rem;  /* 17px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   2.75rem;    /* 44px, clamp ceiling */

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

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

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tight:   0em;
  --tracking-normal:  0.02em;
  --tracking-wide:    0.1em;
  --tracking-widest:  0.14em;

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

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-sm:     10px;   /* Dropdown items */
  --radius-md:     14px;   /* Inputs */
  --radius-lg:     16px;   /* Dropdown / modal panels */
  --radius-xl:     20px;   /* Cards, surfaces */
  --radius-full:   9999px; /* Buttons, badges, avatar, pill inputs */

  /* ─── SHADOWS (blue-tinted, never pure black) ───────────────── */
  --shadow-card:        0 8px 32px rgba(31, 74, 121, 0.12);
  --shadow-dropdown:    0 16px 40px rgba(31, 74, 121, 0.18);
  --shadow-btn-primary: 0 8px 20px rgba(13, 148, 136, 0.35);
  --shadow-btn-primary-hover: 0 10px 26px rgba(13, 148, 136, 0.5);
  --shadow-btn-destructive:   0 8px 20px rgba(220, 38, 38, 0.3);
  --shadow-focus-ring:  0 0 0 4px rgba(13, 148, 136, 0.15);

  /* ─── ANIMATION ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;

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

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    1100;

}
```

---

## 3. Color Palette

### 3.1 Background & Glass Fill Colors

| Token | Value | Use |
|-------|-------|-----|
| `--color-bg-gradient` | `linear-gradient(135deg,#dbeafe,#e0f2fe 45%,#f0fdfa)` | Page background — the only background in the system |
| `--glass-fill-base` | `rgba(255,255,255,0.55)` | Cards, primary surfaces, inputs |
| `--glass-fill-heavy` | `rgba(255,255,255,0.75)` | Dropdown/modal panels, focused inputs |
| `--glass-fill-light` | `rgba(255,255,255,0.35)` | Dashed button fill |
| `--glass-border` | `rgba(255,255,255,0.7)` | Card border |
| `--glass-border-strong` | `rgba(255,255,255,0.9)` | Dropdown/modal border |

### 3.2 Teal Accent Scale

| Token | Value | Use |
|-------|-------|-----|
| `--color-teal-100` | `rgba(13,148,136,0.06)` | Table row hover |
| `--color-teal-200` | `rgba(13,148,136,0.14)` | Badge tint, dropdown item hover |
| `--color-teal-300` | `rgba(13,148,136,0.15)` | Input focus ring |
| `--color-teal-400` | `#0d9488` | **Primary accent** — buttons, dots, focus border |
| `--color-teal-500` | `#0ea5b0` | Primary button gradient end |
| `--color-teal-700` | `#0f766e` | Section titles, labels, link-style text |
| `--color-sky-400` | `#38bdf8` | Secondary/info accent |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#0f2942` | Headings — deep navy ink |
| `--color-text-secondary` | `#1e293b` | Body copy |
| `--color-text-tertiary` | `#3b5670` | Header subtitle, captions |
| `--color-text-muted` | `#5b7690` | Secondary text, placeholders |
| `--color-text-disabled` | `#a0b0be` | Disabled states |

### 3.4 Semantic Colors

| State | Text | Background |
|-------|------|------------|
| Success | `#15803d` | `rgba(34,197,94,0.16)` |
| Warning | `#b45309` | `rgba(245,158,11,0.16)` |
| Error | `#b91c1c` | `rgba(220,38,38,0.16)` |
| Info | `#0369a1` | `rgba(56,189,248,0.18)` |
| Neutral | `#475569` | `rgba(148,163,184,0.2)` |

---

## 4. Typography System

### 4.1 Font Families

**Display — `'Poppins'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap')`
- Weights used: 600, 700
- Character: Geometric, rounded, friendly-premium
- Usage: `h1`/`h2` headings, section headings, subheadings — anything that establishes visual hierarchy at a glance

**Body / UI — `'Inter'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')`
- Weights used: 400, 500, 600, 700
- Character: Neutral, highly legible workhorse grotesque
- Usage: Body copy, buttons, labels, inputs, table cells, badges, captions

This is a standard two-font law: Poppins for anything that needs personality and hierarchy, Inter for everything functional.

---

### 4.2 Type Scale — Full Specification

#### Display (Poppins)

| Role | Size (px) | Weight | Line Height | Color |
|------|-----------|--------|-------------|-------|
| Display Heading | 40px (clamp 28–44px) | 700 | 1.1 | `#0f2942` |
| Section Heading | 24px | 600 | 1.2 | `#164e63` |
| Subheading | 17px | 500 | 1.3 | `#0f766e` |

#### Body / UI (Inter)

| Role | Size (px) | Weight | Line Height | Color |
|------|-----------|--------|-------------|-------|
| Primary text | 15px | 400 | 1.7 | `#1e293b` |
| Secondary text | 13px | 400 | 1.5 | `#5b7690` |
| Button label | 13.5px | 600 | 1 | context-dependent |
| Field label | 11.5px | 600 | 1 | `#0f766e` |
| Section title | 11px | 600 | 1 (tracking 0.1em, uppercase) | `#0f766e` |
| Badge | 11px | 600 | 1 | context-dependent |
| Table header | 11px | 600 | 1 (tracking 0.06em, uppercase) | `#0f766e` |
| Table cell | 13.5px | 400 | 1.4 | `#1e293b` |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: #164e63;
}

.subheading {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-teal-700);
}

.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-teal-700);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal-400);
}

p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-teal-700);
  margin-bottom: 7px;
  display: block;
}
```

**Signature detail:** every section title is preceded by a small solid teal dot (`8px` circle) rendered via `::before` — this is the system's smallest, most repeated brand mark, appearing dozens of times per screen.

---

## 5. Spacing System

Glass uses a slightly looser spacing rhythm than dense/technical systems — cards need breathing room for the blur effect to read clearly.

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-1` | 4px | Icon-to-text gap in badges |
| `--space-3` | 6px | Section-title dot gap |
| `--space-5` | 8px | Focus ring offset context |
| `--space-8` | 12px | Input padding-h, grid gaps |
| `--space-9` | 14px | Field group gap |
| `--space-10` | 16px | Grid gaps between fields |
| `--space-12` | 20px | Card gap in dashboard grids |
| `--space-14` | 24px | Card padding (compact) |
| `--space-16` | 28px | Card padding (standard) |
| `--space-18` | 32px | Header padding, section gaps |
| `--space-22` | 40px | Page padding |

### 5.2 Component Spacing Specifications

#### Modal
```
Container padding: 30px
Title margin-bottom: 6px
Description margin-bottom: 18px
Button gap: 10px
Max-width: 440px
```

#### Card
```
Header card padding: 32px 36px
Standard card padding: 28px 32px
Compact card padding: 24px
Section title margin-bottom: 18px
```

#### Button
```
Padding: 11px 24px
Border-radius: 9999px (always)
```

#### Input
```
Padding: 11px 16px
Border-radius: 14px
Label margin-bottom: 7px
```

#### Badge
```
Padding: 4px 12px
Font size: 11px
Border-radius: 9999px
```

---

## 6. Border Radius System

Glass uses a **large, soft-first** radius philosophy — nothing in the system is sharp, and buttons/inputs/badges are fully pill-shaped.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-sm` | 10px | Dropdown menu items |
| `--radius-md` | 14px | Text inputs, textareas |
| `--radius-lg` | 16px | Dropdown / modal panel shell |
| `--radius-xl` | 20px | Cards, primary surfaces |
| `--radius-full` | 9999px | Buttons, badges, checkboxes, switch tracks |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Card / surface | 20px |
| Button (all variants) | 9999px (pill) |
| Text input / textarea | 14px |
| Select / dropdown trigger | 14px (matches input) |
| Dropdown panel | 16px |
| Badge / status chip | 9999px |
| Checkbox | 8px (soft square — the one deliberate exception) |
| Radio | 9999px |
| Switch track | 9999px |
| Modal | 20px |
| Skeleton block | 10px |

---

## 7. Shadow & Elevation System

### 7.1 The Blue-Tinted Shadow Rule

Glass never uses pure black ambient shadow. Every shadow is tinted toward the page's cool blue undertone:

```css
box-shadow: 0 8px 32px rgba(31, 74, 121, 0.12);
```

This is what separates Glass from a generic white-card system — even the shadows feel like they belong to the sky-gradient environment.

### 7.2 Elevation and Shadow Pairing

| What You're Building | Shadow to Use |
|---------------------|---------------|
| Card / surface | `--shadow-card` |
| Dropdown panel | `--shadow-dropdown` |
| Primary button (default) | `--shadow-btn-primary` |
| Primary button (hover) | `--shadow-btn-primary-hover` + `translateY(-1px)` |
| Destructive button | `--shadow-btn-destructive` |
| Input focus | `--shadow-focus-ring` (a 4px soft ring, not a directional shadow) |
| Modal | `--shadow-dropdown` (shares the dropdown's elevation value) |

### 7.3 Backdrop Blur Is Itself an Elevation Signal

Unlike opaque-surface systems, Glass communicates elevation partly through **blur radius**, not just shadow depth:

| Layer | Blur |
|-------|------|
| Card | `blur(18px)` |
| Input | `blur(10px)` |
| Dropdown / modal panel | `blur(20px)` |
| Secondary button | `blur(10px)` |

Higher layers (dropdowns, modals) get the strongest blur — this reinforces that they float furthest above the page.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;

  background: linear-gradient(135deg, #0d9488, #0ea5b0);
  border: 1px solid transparent;
  border-radius: var(--radius-full);

  padding: 11px 24px;
  box-shadow: var(--shadow-btn-primary);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}
.btn-primary:hover {
  box-shadow: var(--shadow-btn-primary-hover);
  transform: translateY(-1px);
}
```

#### Secondary Button
```css
.btn-secondary {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  color: var(--color-teal-700);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-full);
  padding: 11px 24px;
  font-weight: 600;
}
```

#### Outline Button
```css
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-teal-400);
  color: var(--color-teal-400);
  border-radius: var(--radius-full);
  padding: 11px 24px;
}
```

#### Destructive Button
```css
.btn-destructive {
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-btn-destructive);
  padding: 11px 24px;
}
```

#### Dashed / Filled-Dashed
```css
.btn-dashed {
  background: rgba(255,255,255,0.35);
  border: 1.5px dashed var(--color-teal-400);
  color: var(--color-teal-700);
  border-radius: var(--radius-full);
}
.btn-filled-dashed {
  background: rgba(13,148,136,0.14);
  border: 1.5px dashed var(--color-teal-400);
  color: var(--color-teal-700);
  border-radius: var(--radius-full);
}
```

#### Loading & Disabled
```css
.btn-primary[data-loading] { opacity: 0.7; pointer-events: none; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
```

---

### 8.2 Form Inputs

```css
.input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-md); /* 14px */

  padding: 11px 16px;
  width: 100%;
  outline: none;
  transition: all var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:focus {
  border-color: var(--color-teal-400);
  box-shadow: var(--shadow-focus-ring);
  background: rgba(255,255,255,0.75);
}
.input:disabled { opacity: 0.45; cursor: not-allowed; }
```

**Search input variant:** adds a `14px` teal stroke-icon positioned `13px` from the left, with `padding-left: 38px` on the input itself.

**Textarea variant:** identical styling, `resize: vertical`, no fixed height (grows from single-row default).

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-teal-700);
  letter-spacing: 0.02em;
  margin-bottom: 7px;
  display: block;
}
```

---

### 8.4 Card / Surface

```css
.glass-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
}
```

Header/hero cards use larger padding (`32px 36px`); compact utility cards (checkbox/radio/switch triads) use `24px`.

---

### 8.5 Modal

```css
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
}

.modal {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  max-width: 440px;
  width: 90%;
  padding: 30px;
}
```

The modal reuses the exact `.glass-card` recipe at a higher opacity (`0.85` vs `0.55`) so it reads as "closer" to the viewer than page-level cards.

---

### 8.6 Badge / Status Chip

```css
.badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-success { background: rgba(34,197,94,0.16); color: #15803d; }
.badge-warning { background: rgba(245,158,11,0.16); color: #b45309; }
.badge-error   { background: rgba(220,38,38,0.16);  color: #b91c1c; }
.badge-info    { background: rgba(56,189,248,0.18); color: #0369a1; }
.badge-neutral { background: rgba(148,163,184,0.2); color: #475569; }
.badge-custom  { background: linear-gradient(135deg, rgba(13,148,136,0.25), rgba(56,189,248,0.25)); color: #0f766e; border: 1px solid rgba(13,148,136,0.3); }
```

---

### 8.7 Checkbox, Radio & Switch

```css
.check-box {
  width: 20px; height: 20px;
  border: 1.5px solid rgba(13,148,136,0.4);
  border-radius: 8px;                 /* soft square — the one non-pill radius */
  background: rgba(255,255,255,0.5);
}
.custom-check:checked + .check-box {
  background: var(--color-teal-400);
  border-color: var(--color-teal-400);
}

.radio-box {
  width: 20px; height: 20px;
  border: 1.5px solid rgba(13,148,136,0.4);
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

.switch-track {
  width: 44px; height: 26px;
  background: rgba(13,148,136,0.4);
  border-radius: 9999px;
  position: relative;
}
.switch-thumb {
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute; top: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform var(--duration-base) var(--ease-out);
}
.switch-track.on { background: var(--color-teal-400); }
.switch-track.on .switch-thumb { transform: translateX(20px); }
```

---

### 8.8 Table

```css
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-700);
  border-bottom: 1px solid rgba(15,118,110,0.15);
}
td { padding: 12px 16px; border-bottom: 1px solid rgba(15,118,110,0.08); }
tr:hover td { background: rgba(13,148,136,0.06); }
```

---

### 8.9 Dropdown Panel (Select / Multi-Select / Date / Time)

```css
.dropdown-menu {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
  margin-top: 8px;
  padding: 6px;
}
.dropdown-item {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 150ms;
}
.dropdown-item:hover, .dropdown-item.picked {
  background: rgba(13,148,136,0.14);
  color: var(--color-teal-700);
}
```

All four dropdown-driven components (select, multi-select, date picker, time picker) share this exact panel recipe — only the internal content layout changes (list vs. calendar grid vs. time list vs. checkbox list).

---

### 8.10 Skeleton & Toast

```css
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 75%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.toast {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 14px 20px;
  position: fixed; bottom: 24px; right: 24px;
  transform: translateY(140%); opacity: 0;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.toast.show { transform: translateY(0); opacity: 1; }
```

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value | Use |
|-------|-------|-----|
| `--container-sm` | 480px | Modals |
| `--container-md` | 640px | Narrow content |
| `--container-lg` | 800px | Page sections |
| `--container-xl` | 1040px | Dashboard content |
| `--container-2xl` | 1200px | Max page width |

### 9.2 Standard Layouts

```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.layout-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.layout-wide-narrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
```

Card gaps are `20–24px` — generous enough that the blur/gradient background is clearly visible between floating surfaces, which is essential to the glassmorphism effect reading correctly.

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16, 1, 0.3, 1)` | Toast entry, panel open |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | Hover/focus state changes |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-fast` | 150ms | Dropdown item hover |
| `--duration-base` | 200ms | Button/input state changes |
| `--duration-slow` | 300ms | Modal/toast entry |

### 10.3 Signature Motion: The Lift

```css
.btn-primary:hover { transform: translateY(-1px); }
```

Primary buttons lift by exactly `1px` on hover, paired with an expanding glow shadow — a subtle "floating higher" cue consistent with the glass metaphor. No other system component uses a translate-based hover.

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-below` | -1 | Background gradient decoration |
| `--z-base` | 0 | Normal flow |
| `--z-raised` | 10 | Cards |
| `--z-dropdown` | 50 | Dropdown menus |
| `--z-sticky` | 200 | Sticky tab bar |
| `--z-modal` | 1000 | Modal overlay |
| `--z-toast` | 1100 | Toast notifications |

---

## 12. Breakpoints

```css
--bp-sm:  480px;
--bp-md:  768px;
--bp-lg:  1024px;

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

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|-------------------------|
| < 480px | 16px |
| 480px–1023px | 24px |
| 1024px+ | 24px |

---

## 13. Icon System

- **Size scale:** 13px, 14px, 16px
- **Default size:** 14px inline, 16px standalone
- **Stroke weight:** 1.5–2px, stroke-based (outline), never filled
- **Color:** `var(--color-teal-400)` for functional icons (search, calendar, clock); inherits text color elsewhere
- **Library recommendation:** Feather Icons or Lucide — thin, rounded-cap strokes match the soft glass aesthetic
- **Section-title dot:** filled circle, 8px diameter, always `var(--color-teal-400)`

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

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background | Extra |
|-------|--------|------------|-------|
| Default | `rgba(255,255,255,0.8)` | `rgba(255,255,255,0.55)` | — |
| Hover | `rgba(255,255,255,0.8)` | `rgba(255,255,255,0.6)` | slightly more opaque |
| Focus | `#0d9488` | `rgba(255,255,255,0.75)` | + 4px teal glow ring |
| Disabled | `rgba(255,255,255,0.8)` | `rgba(255,255,255,0.55)` | opacity 0.45 |

### 14.2 Button States

| State | Primary | Secondary | Outline |
|-------|---------|-----------|---------|
| Default | gradient teal, glow shadow | translucent white, teal text | transparent, teal border/text |
| Hover | stronger glow + `translateY(-1px)` | slightly more opaque | `rgba(13,148,136,0.1)` fill |
| Active | scale 0.98 | scale 0.98 | scale 0.98 |
| Loading | spinner + "Loading..." label, opacity 0.7 | — | — |
| Disabled | opacity 0.4 | opacity 0.4 | opacity 0.4 |

### 14.3 Toast Lifecycle

```css
@keyframes toast-in { from { transform: translateY(140%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
Auto-dismiss after 3000ms, matching the `.toast` / `.toast.show` class-toggle pattern.

---

*End of Design System — Glass v1.0*