docs: Token Philosophy + updated Design Specification

- Add docs/design/TOKEN_PHILOSOPHY.md (v1.0, LOCKED)
  - Three-level token hierarchy: Primitive → Semantic → Component
  - Semantic-first rule: no primitive references where semantic exists
  - DTCG JSON as canonical export format
  - Semantic versioning + deprecation policy
  - Platform agnostic (web, iOS, Android, future)

- Update LANDVEX_DESIGN_SPECIFICATION.md
  - Add Token Philosophy as chapter 0
  - Restructure Design Tokens (chapter 1) with three levels
  - Add blur scale, border width primitives
  - Add semantic tokens (surface, text, border)
  - Add component tokens (Button, Data Grid examples)
  - Reference TOKEN_PHILOSOPHY.md for governance rules

Rationale: Establish token rules before values. Prevents rework
when components are specified later.

docs/design/LANDVEX_DESIGN_SPECIFICATION.md

@@ -12,6 +12,19 @@
 
 ---
 
+## 0. Token Philosophy
+
+See `TOKEN_PHILOSOPHY.md` for the complete token governance rules.
+
+**Quick Reference:**
+- Three levels: Primitive → Semantic → Component
+- Semantic first, primitive only when necessary
+- DTCG JSON as canonical format
+- Semantic versioning for token changes
+- Deprecation policy: mark, maintain 2 versions, then remove
+
+---
+
 > **Om detta dokument**
 > Detta är ett levande kontrakt. Varje kapitel fylls på successivt.
 > Ingen implementation får bryta mot en specificerad regel.
@@ -21,6 +34,7 @@
 
 ## Innehållsförteckning
 
+0. [Token Philosophy](#0-token-philosophy)
 1. [Design Tokens](#1-design-tokens)
 2. [Layout System](#2-layout-system)
 3. [Typography](#3-typography)
@@ -45,8 +59,23 @@
 ## 1. Design Tokens
 
 > **Status:** ⏳ Ej påbörjad
+> **Parent:** `TOKEN_PHILOSOPHY.md`
 
-### 1.1 Spacing Scale
+### 1.0 Token Architecture
+
+All tokens follow the three-level hierarchy defined in `TOKEN_PHILOSOPHY.md`:
+
+```
+Level 1: Primitive Tokens  →  Raw values (numbers, colors, dimensions)
+Level 2: Semantic Tokens   →  Purpose-driven (surface-primary, text-muted)
+Level 3: Component Tokens  →  Component-specific (button-primary-bg-hover)
+```
+
+**Rule:** Components reference Level 2 (Semantic) by default. Level 3 (Component) only when component-specific override is required. Level 1 (Primitive) never directly from components.
+
+### 1.1 Primitive Tokens
+
+#### 1.1.1 Spacing Scale
 
 | Token | Value | Usage |
 |-------|-------|-------|
@@ -61,7 +90,7 @@
 | `space-8` | 64px | Major section breaks |
 | `space-9` | 96px | Hero/page top |
 
-### 1.2 Border Radius
+#### 1.1.2 Border Radius
 
 | Token | Value | Usage |
 |-------|-------|-------|
@@ -72,7 +101,7 @@
 | `radius-4` | 12px | Large cards, modals |
 | `radius-full` | 9999px | Pills, avatars |
 
-### 1.3 Z-Index Scale
+#### 1.1.3 Z-Index Scale
 
 | Token | Value | Usage |
 |-------|-------|-------|
@@ -84,7 +113,7 @@
 | `z-toast` | 500 | Notifications |
 | `z-overlay` | 600 | Full-screen overlays |
 
-### 1.4 Opacity Scale
+#### 1.1.4 Opacity Scale
 
 | Token | Value | Usage |
 |-------|-------|-------|
@@ -94,6 +123,75 @@
 | `opacity-75` | 75% | Secondary text |
 | `opacity-100` | 100% | Primary content |
 
+#### 1.1.5 Blur Scale
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `blur-0` | 0px | No blur |
+| `blur-sm` | 4px | Subtle backdrop |
+| `blur-md` | 8px | Modal backdrop |
+| `blur-lg` | 16px | Full-screen overlay |
+
+#### 1.1.6 Border Width
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `border-0` | 0px | No border |
+| `border-1` | 1px | Default dividers |
+| `border-2` | 2px | Focus rings, active states |
+| `border-4` | 4px | Emphasis, errors |
+
+### 1.2 Semantic Tokens
+
+#### 1.2.1 Surface Colors
+
+| Token | Primitive Reference | Usage |
+|-------|---------------------|-------|
+| `surface-primary` | `gray-0` | Main background |
+| `surface-secondary` | `gray-50` | Card background |
+| `surface-elevated` | `gray-0` + shadow | Modal, popover |
+| `surface-overlay` | `gray-900` @ 50% | Backdrop |
+
+#### 1.2.2 Text Colors
+
+| Token | Primitive Reference | Usage |
+|-------|---------------------|-------|
+| `text-primary` | `gray-900` | Headings, body |
+| `text-secondary` | `gray-600` | Captions, metadata |
+| `text-muted` | `gray-400` | Placeholders |
+| `text-inverse` | `gray-0` | On dark surfaces |
+
+#### 1.2.3 Border Colors
+
+| Token | Primitive Reference | Usage |
+|-------|---------------------|-------|
+| `border-default` | `gray-200` | Dividers |
+| `border-focus` | `blue-500` | Focus rings |
+| `border-error` | `red-500` | Error states |
+
+### 1.3 Component Tokens
+
+#### 1.3.1 Button
+
+| Token | Semantic Reference | Usage |
+|-------|-------------------|-------|
+| `button-primary-bg` | `surface-primary` | Default background |
+| `button-primary-bg-hover` | `blue-600` | Hover state |
+| `button-primary-text` | `text-inverse` | Label color |
+
+#### 1.3.2 Data Grid
+
+| Token | Semantic Reference | Usage |
+|-------|-------------------|-------|
+| `table-row-hover` | `gray-50` | Hover highlight |
+| `table-header-bg` | `gray-100` | Header background |
+
+### 1.4 Export Format
+
+Canonical: DTCG JSON. Derived: CSS custom properties, Tailwind config, Swift, Kotlin.
+
+See `TOKEN_PHILOSOPHY.md` §3 for full specification.
+
 ---
 
 ## 2. Layout System