# Luxury Editorial — Complete Design System
> Version 1.0 · Derived from the Luxury Editorial Modal (Variant 5)

---

## 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:** Luxury Editorial  
**Aesthetic Family:** Refined minimalism, warm neutrals, gold accents, editorial typographic hierarchy  
**Personality:** Deliberate, unhurried, confident, refined — communicates trust, gravity, and careful craft  
**Best Suited For:** SaaS dashboards, fintech, compliance tools, legal platforms, premium productivity software, policy management, admin portals, documentation systems, enterprise UI

**Core Principles:**
- Warmth over cold sterility — cream backgrounds, not pure white
- Sharp restraint in radius — almost flat, not rounded-pill
- Typographic contrast as the primary visual hierarchy driver
- Gold as the single prestige accent — never overused
- Negative space is intentional — density is kept controlled
- Mono font for metadata, code, counters, and labels only

---

## 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:          #faf7f0;   /* Page / app background */
  --color-bg-surface:       #f5f0e4;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #fff;      /* Inputs, modals, popups */
  --color-bg-sunken:        #f0ead6;   /* Inset areas, code blocks, aside */
  --color-bg-overlay:       rgba(250, 247, 240, 0.88); /* Modal backdrop */
  --color-bg-overlay-blur:  rgba(220, 215, 200, 0.72); /* Blur-capable overlay */

  /* ─── COLOR: GOLD ACCENT ─────────────────────────────────────── */
  --color-gold-100:         #fdf8e8;   /* Lightest tint — hover states */
  --color-gold-200:         #f5e9b8;   /* Highlight background */
  --color-gold-300:         #e8c870;   /* Light gold, button text on dark */
  --color-gold-400:         #d4aa44;   /* Medium gold, borders active */
  --color-gold-500:         #c9a84c;   /* Primary accent — accent line, focus */
  --color-gold-600:         #b8962a;   /* Darker gold, pressed states */
  --color-gold-700:         #9a7c20;   /* Deep gold, muted labels */
  --color-gold-gradient:    linear-gradient(90deg, #c9a84c, #e8c870, #c9a84c);

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #1a1408;   /* Near-black, warm — headings, body */
  --color-text-secondary:   #5a4a20;   /* Warm brown — descriptions, body copy */
  --color-text-tertiary:    #8a6a20;   /* Golden brown — labels, hints */
  --color-text-muted:       #b09030;   /* Muted gold — counters, timestamps */
  --color-text-disabled:    #c8b888;   /* Disabled state text */
  --color-text-inverse:     #e8c870;   /* Light gold on dark backgrounds */
  --color-text-inverse-dim: #c8a850;   /* Dimmer on dark */
  --color-text-placeholder: #c0aa70;   /* Input placeholder */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-hairline:  #f0e8cc;   /* Subtlest separator, barely-there */
  --color-border-light:     #e8d8a0;   /* Rule lines, section dividers */
  --color-border-medium:    #e0cc90;   /* Input borders, card edges */
  --color-border-strong:    #d0b860;   /* Active inputs, button borders */
  --color-border-accent:    #c9a84c;   /* Focused state, gold rule */
  --color-border-dark:      #1a1408;   /* Dark button border */

  /* ─── COLOR: INTERACTIVE SURFACES ───────────────────────────── */
  --color-btn-primary-bg:   #1a1408;   /* Dark button background */
  --color-btn-primary-text: #e8c870;   /* Gold text on dark button */
  --color-btn-primary-hover:#2a2010;   /* Hover state — slightly lighter dark */
  --color-btn-primary-shadow: rgba(100, 80, 30, 0.25);

  --color-btn-secondary-bg:   transparent;
  --color-btn-secondary-text: #8a6a20;
  --color-btn-secondary-border:#d0b860;
  --color-btn-secondary-hover: rgba(201, 168, 76, 0.08);

  --color-btn-ghost-text:   #5a4a20;
  --color-btn-ghost-hover:  #f0e8d0;

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #4a7a30;
  --color-success-bg:       #eaf3e0;
  --color-success-border:   #b8d898;
  --color-warning:          #9a6a10;
  --color-warning-bg:       #fdf3d0;
  --color-warning-border:   #e8c848;
  --color-error:            #8a2020;
  --color-error-bg:         #fdecea;
  --color-error-border:     #d88080;
  --color-info:             #204878;
  --color-info-bg:          #e8f0fb;
  --color-info-border:      #90b0d8;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:     'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'DM Mono', '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:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.25rem;    /* 20px */
  --text-3xl:   1.5rem;     /* 24px */
  --text-4xl:   1.875rem;   /* 30px */
  --text-5xl:   2.25rem;    /* 36px */
  --text-6xl:   3rem;       /* 48px */
  --text-7xl:   3.75rem;    /* 60px */

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

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

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ─── 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-11:  22px;
  --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;
  --space-64:  128px;
  --space-80:  160px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     2px;   /* Inputs, buttons, tags — primary radius */
  --radius-sm:     4px;   /* Cards, modals — secondary radius */
  --radius-md:     6px;   /* Larger containers */
  --radius-lg:     8px;   /* Only for decorative elements */
  --radius-full:   9999px; /* Pills, badges only — use sparingly */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(100, 80, 30, 0.08);
  --shadow-sm:      0 2px 8px rgba(100, 80, 30, 0.10);
  --shadow-md:      0 6px 20px rgba(100, 80, 30, 0.14);
  --shadow-lg:      0 16px 40px rgba(100, 80, 30, 0.18);
  --shadow-xl:      0 24px 60px rgba(100, 80, 30, 0.22);
  --shadow-modal:   0 2px 0 #c9a84c, 0 24px 60px rgba(100, 80, 30, 0.20);
  --shadow-card:    0 1px 0 #e0cc90, 0 8px 24px rgba(100, 80, 30, 0.12);
  --shadow-input:   none;
  --shadow-input-focus: none; /* Border color change only, no shadow */
  --shadow-gold-glow: 0 0 20px rgba(201, 168, 76, 0.25);

  /* ─── 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:    350ms;
  --duration-slower:  500ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-xs:    380px;
  --container-sm:    480px;
  --container-md:    640px;
  --container-lg:    800px;
  --container-xl:   1040px;
  --container-2xl:  1280px;
  --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;

  /* ─── ACCENT LINE HEIGHT ─────────────────────────────────────── */
  --accent-line-height: 3px;   /* Top border on cards and modals */

}
```

---

## 3. Color Palette

### 3.1 Background Colors

| Token | Hex | RGB | Use |
|-------|-----|-----|-----|
| `--color-bg-base` | `#faf7f0` | 250, 247, 240 | Page-level background |
| `--color-bg-surface` | `#f5f0e4` | 245, 240, 228 | Cards, side panels, sidebar |
| `--color-bg-elevated` | `#ffffff` | 255, 255, 255 | Modals, popups, inputs |
| `--color-bg-sunken` | `#f0ead6` | 240, 234, 214 | Inset wells, asides, code bg |
| `--color-bg-overlay` | `rgba(250,247,240,0.88)` | — | Modal scrim |

### 3.2 Gold Accent Scale

| Token | Hex | Use |
|-------|-----|-----|
| `--color-gold-100` | `#fdf8e8` | Hover surface wash |
| `--color-gold-200` | `#f5e9b8` | Selection highlight |
| `--color-gold-300` | `#e8c870` | Light gold — button text on dark, gradient peak |
| `--color-gold-400` | `#d4aa44` | Active border, focus ring |
| `--color-gold-500` | `#c9a84c` | **Primary accent** — accent lines, icons, ring |
| `--color-gold-600` | `#b8962a` | Pressed button, active links |
| `--color-gold-700` | `#9a7c20` | Deep emphasis, eyebrow on dark bg |
| Gradient | `linear-gradient(90deg, #c9a84c, #e8c870, #c9a84c)` | Top accent line |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#1a1408` | All headings, main body, high-emphasis |
| `--color-text-secondary` | `#5a4a20` | Descriptions, body copy, supporting text |
| `--color-text-tertiary` | `#8a6a20` | Labels (mono), hints, captions |
| `--color-text-muted` | `#b09030` | Counters, timestamps, metadata |
| `--color-text-disabled` | `#c8b888` | Disabled states |
| `--color-text-inverse` | `#e8c870` | On dark (`#1a1408`) backgrounds |
| `--color-text-placeholder`| `#c0aa70` | Input placeholder |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-hairline` | `#f0e8cc` | Only the subtlest horizontal rule |
| `--color-border-light` | `#e8d8a0` | Section dividers (`<hr>`) |
| `--color-border-medium` | `#e0cc90` | Default input, card border |
| `--color-border-strong` | `#d0b860` | Button outline (secondary), active input |
| `--color-border-accent` | `#c9a84c` | Focused input, selected card |
| `--color-border-dark` | `#1a1408` | Primary button border |

### 3.5 Semantic Colors

| State | Text | Background | Border |
|-------|------|------------|--------|
| Success | `#4a7a30` | `#eaf3e0` | `#b8d898` |
| Warning | `#9a6a10` | `#fdf3d0` | `#e8c848` |
| Error | `#8a2020` | `#fdecea` | `#d88080` |
| Info | `#204878` | `#e8f0fb` | `#90b0d8` |

---

## 4. Typography System

### 4.1 Font Families

**Display / Headings — `'Instrument Serif'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')`
- Fallback: `Georgia, 'Times New Roman', serif`
- Weights available: 400 (Regular), 400 Italic
- Character: Delicate, editorial, refined — not academic, not heavy
- Usage: Page titles, modal titles, hero headlines, section headings H1–H2

**Body / UI — `'Manrope'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap')`
- Fallback: `'Segoe UI', system-ui, sans-serif`
- Weights used: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
- Character: Geometric humanist — modern yet readable, not clinical
- Usage: Body copy, buttons, inputs, navigation, UI labels, descriptions

**Mono / Metadata — `'DM Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap')`
- Fallback: `'Cascadia Code', 'Consolas', monospace`
- Weights used: 400 (Regular), 500 (Medium)
- Character: Precise, mechanical, data-oriented
- Usage: Eyebrow labels, badge text, counters, code, timestamps, keyboard shortcuts, metadata tags

---

### 4.2 Type Scale — Full Specification

#### Display / Title (Instrument Serif)

| Role | Size Token | Size (rem/px) | Weight | Style | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------|-------------|----------------|------|
| Hero Title | `--text-7xl` | 3.75rem / 60px | 300 | italic | 1.1 | -0.02em | Instrument Serif |
| Page Title | `--text-6xl` | 3rem / 48px | 300 | italic | 1.15 | -0.02em | Instrument Serif |
| Section Title | `--text-5xl` | 2.25rem / 36px | 300 | italic | 1.2 | -0.015em | Instrument Serif |
| Modal / Card Title | `--text-3xl` | 1.5rem / 24px | 300 | italic | 1.2 | -0.01em | Instrument Serif |
| Sub-title | `--text-2xl` | 1.25rem / 20px | 400 | normal | 1.3 | -0.01em | Instrument Serif |
| Small Title | `--text-xl` | 1.125rem / 18px | 400 | italic | 1.35 | 0em | Instrument Serif |

#### Body / UI (Manrope)

| Role | Size Token | Size (rem/px) | Weight | Line Height | Letter Spacing | Font |
|------|-----------|---------------|--------|-------------|----------------|------|
| Large Body | `--text-lg` | 1rem / 16px | 400 | 1.65 | 0em | Manrope |
| Base Body | `--text-md` | 0.875rem / 14px | 400 | 1.65 | 0em | Manrope |
| Small Body | `--text-base` | 0.8125rem / 13px | 400 | 1.65 | 0em | Manrope |
| Caption | `--text-sm` | 0.75rem / 12px | 400 | 1.5 | 0em | Manrope |
| Micro | `--text-xs` | 0.6875rem / 11px | 400 | 1.4 | 0em | Manrope |
| Button Large | `--text-md` | 0.875rem / 14px | 600 | 1 | 0.01em | Manrope |
| Button Base | `--text-base` | 0.8125rem / 13px | 600 | 1 | 0.01em | Manrope |
| Button Small | `--text-sm` | 0.75rem / 12px | 600 | 1 | 0.02em | Manrope |
| Nav Link | `--text-md` | 0.875rem / 14px | 500 | 1 | 0em | Manrope |
| Description | `--text-base` | 0.8125rem / 13px | 400 | 1.7 | 0em | Manrope |

#### Mono / Labels (DM Mono)

| Role | Size Token | Size (rem/px) | Weight | Transform | Letter Spacing | Font |
|------|-----------|---------------|--------|-----------|----------------|------|
| Section Eyebrow | `--text-xs` | 0.6875rem / 11px | 500 | uppercase | 0.14em | DM Mono |
| Field Label | `--text-xs` | 0.6875rem / 11px | 400 | uppercase | 0.10em | DM Mono |
| Badge / Chip | `--text-2xs` | 0.625rem / 10px | 500 | uppercase | 0.10em | DM Mono |
| Counter / Char | `--text-2xs` | 0.625rem / 10px | 400 | none | 0.04em | DM Mono |
| Timestamp | `--text-xs` | 0.6875rem / 11px | 400 | none | 0.04em | DM Mono |
| Code Inline | `--text-sm` | 0.75rem / 12px | 400 | none | 0em | DM Mono |
| Keyboard Key | `--text-2xs` | 0.625rem / 10px | 500 | uppercase | 0.08em | DM Mono |
| Metadata Tag | `--text-2xs` | 0.625rem / 10px | 400 | uppercase | 0.08em | DM Mono |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* 36px */
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 30px */
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);       /* 24px */
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0em;
  color: var(--color-text-primary);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);        /* 16px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

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

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 500;
  letter-spacing: var(--tracking-widest); /* 0.14em */
  text-transform: uppercase;
  color: var(--color-gold-500);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);      /* 13px */
  font-weight: 400;
  line-height: var(--leading-relaxed); /* 1.65 */
  color: var(--color-text-secondary);
}

strong, b {
  font-weight: 600;
  color: var(--color-text-primary);
}

.caption, .meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-tertiary);
}
```

---

## 5. Spacing System

Based on a 2px base unit. All spacing values are multiples or logical steps.

### 5.1 Base Scale Table

| Token | Value | Pixels | Common Use |
|-------|-------|--------|------------|
| `--space-1` | 2px | 2 | Micro gaps, icon-to-text gap |
| `--space-2` | 4px | 4 | Between label and helper text |
| `--space-3` | 6px | 6 | Compact badge padding V |
| `--space-4` | 8px | 8 | Badge padding H, inline gap |
| `--space-5` | 10px | 10 | Button vertical padding (small) |
| `--space-6` | 12px | 12 | Button horizontal padding (small), gap between icon and text |
| `--space-7` | 14px | 14 | Card inner padding (small) |
| `--space-8` | 16px | 16 | Section gap small, nav height supplement |
| `--space-9` | 18px | 18 | Component section gap |
| `--space-10` | 20px | 20 | Block-level vertical margin |
| `--space-12` | 24px | 24 | Description bottom margin |
| `--space-14` | 28px | 28 | Large button H padding |
| `--space-16` | 32px | 32 | Section separation |
| `--space-18` | 36px | 36 | Modal padding, large card padding |
| `--space-20` | 40px | 40 | Hero section padding |
| `--space-24` | 48px | 48 | Page section top margin |
| `--space-32` | 64px | 64 | Large section break |
| `--space-48` | 96px | 96 | Hero section vertical spacing |

---

### 5.2 Component Spacing Specifications

#### Modal
```
padding-all:         36px  (--space-18)
header-bottom:       20px  (--space-10) — to eyebrow from top
eyebrow-to-title:     0px  (direct stack)
title-bottom:        12px  (--space-6)
hr-rule-height:       1px
hr-rule-margin-v:    14px  (7px top + 7px bottom)
description-bottom:  24px  (--space-12)
label-bottom:         8px  (--space-4)
textarea-bottom:      5px  (to char counter)
char-counter-bottom: 22px  (to buttons)
button-gap:          12px  (--space-6)
accent-line-height:   3px
```

#### Card
```
padding-all:          24px  (--space-12)  →  28px  (--space-14) for large cards
inner-section-gap:    20px  (--space-10)
header-padding-v:     20px  (--space-10)
footer-padding-v:     16px  (--space-8)
accent-line-height:    3px  at top
border-radius:         4px  (--radius-sm)
```

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

padding-v-large:      12px  (--space-6)
padding-v-base:       11px  (--space-5 + 1px)
padding-v-small:       8px  (--space-4)

padding-h-large:      24px  (--space-12)
padding-h-base:       20px  (--space-10)
padding-h-small:      14px  (--space-7)

border-radius:         2px  (--radius-xs)
gap-icon-text:         8px  (--space-4)
```

#### Input / Textarea
```
padding-v:            12px  (--space-6)
padding-h:            14px  (--space-7)
border-radius:         2px  (--radius-xs)
min-height-textarea:  88px–100px
border-width:          1px
```

#### Table
```
cell-padding-v:       10px  (--space-5)
cell-padding-h:       16px  (--space-8)
header-padding-v:     10px  (--space-5)
row-gap:               0px  (borders separate)
border-radius:         4px  (table container only)
```

#### Navigation
```
nav-height:           56px
item-padding-h:       16px  (--space-8)
item-padding-v:        8px  (--space-4)
logo-margin-right:    32px  (--space-16)
item-gap:             4px   (--space-2)
```

#### Badge / Tag / Chip
```
padding-v:            4px   (--space-2)
padding-h:           10px   (--space-5)
border-radius:        2px   (--radius-xs) — or 9999px for pill variant
font-size:            10px  (--text-2xs)
letter-spacing:       0.10em
```

---

## 6. Border Radius System

This system uses an extremely restrained radius scale. The Luxury Editorial system is intentionally sharp.

| Token | Value | Where Used |
|-------|-------|-----------|
| `--radius-none` | 0px | Decorative lines, accent bars, `<hr>`, table cells |
| `--radius-xs` | 2px | **PRIMARY** — all inputs, all buttons, all badges, form elements |
| `--radius-sm` | 4px | **SECONDARY** — cards, modals, popovers, tooltips |
| `--radius-md` | 6px | Larger section containers, image crops |
| `--radius-lg` | 8px | Only decorative/illustrative elements, never interactive |
| `--radius-full` | 9999px | Pills only — use exclusively for status indicators, not buttons |

**Radius Budget Rules:**
- Default to `--radius-xs` (2px) for all interactive components
- Default to `--radius-sm` (4px) for all containers
- Never exceed `--radius-md` on any real UI element
- Never use `--radius-full` on buttons (breaks the editorial feel)

---

## 7. Shadow & Elevation System

### 7.1 Elevation Levels

| Level | Token | Value | Use |
|-------|-------|-------|-----|
| 0 — Flat | `--shadow-none` | none | Base surface, cards on bg |
| 1 — Raised | `--shadow-xs` | `0 1px 2px rgba(100,80,30,0.08)` | Inline-elevated elements |
| 2 — Float | `--shadow-sm` | `0 2px 8px rgba(100,80,30,0.10)` | Dropdown, select panels |
| 3 — Card | `--shadow-card` | `0 1px 0 #e0cc90, 0 8px 24px rgba(100,80,30,0.12)` | Cards with border-bottom |
| 4 — Panel | `--shadow-md` | `0 6px 20px rgba(100,80,30,0.14)` | Sidebar, drawer |
| 5 — Modal | `--shadow-modal` | `0 2px 0 #c9a84c, 0 24px 60px rgba(100,80,30,0.20)` | Modals (gold bottom-border shadow) |
| 6 — Deep | `--shadow-xl` | `0 24px 60px rgba(100,80,30,0.22)` | Full-screen takeover panels |

### 7.2 Special Shadow: Modal Signature

The modal shadow is a defining system detail — always keep both layers:

```css
box-shadow: 
  0 2px 0 var(--color-gold-500),    /* Gold bottom-border underline */
  0 24px 60px rgba(100, 80, 30, 0.20);  /* Warm ambient shadow */
```

### 7.3 Shadow Color Logic

All shadows use `rgba(100, 80, 30, opacity)` — a warm amber-brown that matches the cream background. Never use pure black (`rgba(0,0,0,...)`) in this system — it fights the warmth.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: var(--text-base);          /* 13px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-btn-primary-text); /* #e8c870 */

  background: var(--color-btn-primary-bg); /* #1a1408 */
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xs);         /* 2px */

  padding: 11px 20px;
  height: 40px;

  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-primary:hover { background: var(--color-btn-primary-hover); /* #2a2010 */ }
.btn-primary:active { background: #0e0c06; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
```

#### Secondary / Outline Button
```css
.btn-secondary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-btn-secondary-text);  /* #8a6a20 */

  background: var(--color-btn-secondary-bg); /* transparent */
  border: 1px solid var(--color-btn-secondary-border); /* #d0b860 */
  border-radius: var(--radius-xs);

  padding: 11px 20px;
  height: 40px;

  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-secondary:hover { background: var(--color-btn-secondary-hover); }
```

#### Ghost Button
```css
.btn-ghost {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-btn-ghost-text);    /* #5a4a20 */

  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  padding: 11px 16px;

  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--color-bg-sunken); }
```

---

### 8.2 Form Inputs

#### Text Input
```css
.input {
  font-family: var(--font-body);
  font-size: var(--text-base);           /* 13px */
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;

  background: var(--color-bg-elevated);  /* #fff */
  border: 1px solid var(--color-border-medium); /* #e0cc90 */
  border-radius: var(--radius-xs);       /* 2px */

  padding: 12px 14px;
  width: 100%;
  height: 42px;                          /* single-line */

  outline: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:focus        { border-color: var(--color-gold-500); }
.input:hover:not(:focus) { border-color: var(--color-border-strong); }
.input:disabled     { opacity: 0.5; cursor: not-allowed; background: var(--color-bg-sunken); }
.input.error        { border-color: var(--color-error); }
```

#### Textarea
```css
.textarea {
  /* Same as .input */
  height: auto;
  min-height: 88px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}
```

#### Select
```css
.select {
  /* Same as .input */
  appearance: none;
  background-image: url("data:image/svg+xml,...arrow icon...");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
```

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);    /* 11px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-tertiary);  /* #8a6a20 */
  margin-bottom: 8px;
  display: block;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);    /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold-500);
  margin-bottom: 16px;          /* before a title */
}
```

---

### 8.4 Card

```css
.card {
  background: var(--color-bg-surface);    /* #f5f0e4 */
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);        /* 4px */
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Accent line — top gold border */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--accent-line-height);      /* 3px */
  background: var(--color-gold-gradient);
}
```

---

### 8.5 Modal

```css
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.modal {
  background: var(--color-bg-base);     /* #faf7f0 */
  border: none;
  border-radius: var(--radius-sm);      /* 4px */
  padding: 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-modal);
  position: relative;
  overflow: hidden;

  /* Entry animation */
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform var(--duration-slow) var(--ease-standard),
    opacity   var(--duration-base) var(--ease-out);
}
.modal.open {
  transform: translateY(0);
  opacity: 1;
}

/* Accent line */
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-gold-gradient);
}
```

---

### 8.6 Badge / Tag / Chip

```css
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);     /* 10px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-gold-700);
  background: var(--color-gold-100);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-xs); /* 2px — sharp */
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Pill variant — rare, status only */
.badge-pill { border-radius: var(--radius-full); }
```

---

### 8.7 Divider / Rule

```css
hr, .rule {
  border: none;
  border-top: 1px solid var(--color-border-light); /* #e8d8a0 */
  margin: 14px 0;
}

.rule-hairline {
  border-top-color: var(--color-border-hairline); /* #f0e8cc */
}

.rule-accent {
  border: none;
  height: 3px;
  background: var(--color-gold-gradient);
  border-radius: 0; /* Always flat */
}
```

---

### 8.8 Tooltip

```css
.tooltip {
  font-family: var(--font-body);
  font-size: var(--text-sm);      /* 12px */
  font-weight: 400;
  color: var(--color-text-inverse);
  background: var(--color-btn-primary-bg);  /* #1a1408 */
  border: 1px solid rgba(232, 200, 112, 0.2);
  border-radius: var(--radius-sm);  /* 4px */
  padding: 6px 10px;
  max-width: 220px;
  box-shadow: var(--shadow-md);
  z-index: var(--z-tooltip);
}
```

---

### 8.9 Table

```css
.table-container {
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; }
.table thead {
  background: var(--color-bg-sunken);
  border-bottom: 2px solid var(--color-border-medium);
}
.table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  padding: 10px 16px;
  text-align: left;
}
.table td {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-hairline);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-gold-100); }
```

---

## 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, medium dialogs |
| `--container-lg` | 800px | Page sections, wide panels |
| `--container-xl` | 1040px | Full dashboard content |
| `--container-2xl` | 1280px | Wide content |
| `--container-3xl` | 1440px | Max page width |

### 9.2 Column Grid

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

### 9.3 Standard Layouts

```css
/* Content + Sidebar */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-16);   /* 32px */
}

/* Two Equal Columns */
.layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);   /* 20px */
}

/* Three Columns */
.layout-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

/* Stack (Modal / Form) */
.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, success feedback |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Exit transitions, collapsing |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | State changes (color, bg) |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-instant` | 50ms | Color hover changes |
| `--duration-fast` | 100ms | Border, opacity toggles |
| `--duration-base` | 200ms | All interactive state changes |
| `--duration-slow` | 350ms | Panel slides, modal entry |
| `--duration-slower` | 500ms | Page transitions, hero reveals |

### 10.3 Standard Transitions

```css
/* Interactive elements */
.interactive { transition: background var(--duration-base) var(--ease-out),
                            border-color var(--duration-base) var(--ease-out),
                            color var(--duration-fast) var(--ease-out); }

/* Modal entry */
.modal-enter { transform: translateY(12px); opacity: 0;
               transition: transform var(--duration-slow) var(--ease-standard),
                           opacity var(--duration-base) var(--ease-out); }

/* Button press */
.btn-press { transition: transform var(--duration-instant),
                          background var(--duration-fast) var(--ease-out); }
.btn-press:active { transform: scale(0.98); }
```

---

## 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, select panels |
| `--z-sticky` | 200 | Sticky nav, fixed headers |
| `--z-overlay` | 300 | Backdrop overlays |
| `--z-modal` | 400 | Modals and dialogs |
| `--z-toast` | 500 | Toast notifications |
| `--z-tooltip` | 600 | Tooltips (must always be on top) |
| `--z-top` | 999 | Emergency override only |

---

## 12. Breakpoints

```css
/* Mobile first */
--bp-sm:  480px;   /* Compact mobile */
--bp-md:  768px;   /* Tablet */
--bp-lg:  1024px;  /* Laptop */
--bp-xl:  1280px;  /* Desktop */
--bp-2xl: 1440px;  /* Wide desktop */

/* Usage */
@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 | 32px |
| 1024px–1279px | 48px |
| 1280px+ | 64px |

---

## 13. Icon System

- **Size scale:** 14px, 16px, 18px, 20px, 24px, 32px
- **Default size:** 16px for inline, 20px for standalone
- **Stroke weight:** 1.5px (never filled icons except for status indicators)
- **Color:** Inherit from parent text color; never hardcode icon color
- **Library recommendation:** Lucide Icons — stroke-based, geometric, matches editorial feel
- **Alignment:** Always `vertical-align: middle` when inline with text
- **Gap to text:** `--space-4` (8px)

```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 | `#e0cc90` | `#fff` | none |
| Hover | `#d0b860` | `#fff` | none |
| Focus | `#c9a84c` | `#fff` | none |
| Filled | `#e0cc90` | `#fff` | none |
| Disabled | `#f0e8cc` | `#f5f0e4` | none |
| Error | `#d88080` | `#fdecea` | none |
| Success | `#b8d898` | `#eaf3e0` | none |

### 14.2 Button States

| State | Primary Bg | Primary Text | Secondary Bg | Secondary Border |
|-------|-----------|--------------|--------------|-----------------|
| Default | `#1a1408` | `#e8c870` | transparent | `#d0b860` |
| Hover | `#2a2010` | `#e8c870` | `rgba(201,168,76,0.08)` | `#c9a84c` |
| Active/Press | `#0e0c06` | `#e8c870` | `rgba(201,168,76,0.14)` | `#b8962a` |
| Disabled | opacity 0.45 | — | opacity 0.45 | — |
| Loading | opacity 0.7 + spinner | — | — | — |

### 14.3 Link States

```css
a {
  color: var(--color-gold-600);
  text-decoration: underline;
  text-decoration-color: var(--color-border-medium);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--color-gold-500);
  text-decoration-color: var(--color-gold-500);
}
a:visited { color: var(--color-text-tertiary); }
```

---

*End of Design System — Luxury Editorial v1.0*