:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     DESIGN TOKENS — Warm Almond + Gold Foundation
     Last updated: 2026-07-31
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Brand Primitives: Ink ─────────────────────────────────────────────── */
  --color-brand-ink-950: #1A1008;
  --color-brand-ink-900: #2C1E10;
  --color-brand-ink-700: #5A4330;

  /* ── DEPRECATED ALIASES — navy → ink migration ─────────────────────────
     88 rules in components.css, pages/materials.css, pages/legal.css,
     base.css and grammatik/css/grammar.css still reference these.
     ⚠️  NEW CODE MUST USE --color-brand-ink-* instead.                    */
  --color-brand-navy-950: var(--color-brand-ink-950);
  --color-brand-navy-900: var(--color-brand-ink-900);
  --color-brand-navy-700: var(--color-brand-ink-700);

  /* ── Brand Primitives: Gold ────────────────────────────────────────────── */
  --color-brand-gold-700: #7A5500; /* text-safe on canvas, 5.79:1 */
  --color-brand-gold-500: #A87B1A; /* functional non-text, 3.28:1 on canvas */
  --color-brand-gold-400: #C9A84C; /* ⚠️  DECORATIVE ONLY — dark surfaces / gilded edges,
                                       never meaningful on light (1.97:1 on canvas, fails 3:1) */
  --color-brand-gold-300: #F5E6B8; /* champagne — on dark surfaces only */

  /* ── Semantic Surfaces ─────────────────────────────────────────────────── */
  --color-surface-canvas: #F1E7DB;
  --color-surface-raised: #FFFBF5;
  --color-surface-sunken: #EBE0D3;
  --color-surface-inverse: var(--color-brand-ink-900);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --color-text-primary: #2C1E10;
  --color-text-secondary: #6B5744;
  --color-text-inverse: #F3EBDD;

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --color-border-subtle: #D4C4B0;
  --color-border-strong: #8B7A66;

  /* ── Action Hierarchy ──────────────────────────────────────────────────── 
     Primary: dark ink bg with champagne text (high contrast on warm surfaces)
     Inverse: gold-500 bg with ink-950 text (for dark surfaces)
     Secondary: raised bg with ink-900 text, ink-700 border
     Tertiary: ink-700 text on canvas (text-only actions)                   */
  --color-action-primary-bg: var(--color-brand-ink-900);
  --color-action-primary-text: #FFFBF5;
  --color-action-primary-border: var(--color-brand-ink-900);
  --color-action-primary-inverse-bg: var(--color-brand-gold-500);
  --color-action-primary-inverse-text: var(--color-brand-ink-950);
  --color-action-primary-inverse-border: var(--color-brand-gold-500);
  --color-action-secondary-bg: var(--color-surface-raised);
  --color-action-secondary-text: var(--color-brand-ink-900);
  --color-action-secondary-border: var(--color-brand-ink-700);
  --color-action-tertiary-text: var(--color-brand-ink-700);

  /* ── Status (verified on canvas) ───────────────────────────────────────── */
  --color-status-success: #146C43;      /* 5.28:1 on #F1E7DB */
  --color-status-success-bg: #EAF7F0;
  --color-status-error: #B42318;        /* 5.38:1 on #F1E7DB */
  --color-status-error-bg: #FFF0EE;
  --color-status-warning: #8A4B08;
  --color-status-warning-bg: #FFF4E5;
  --color-status-info: #175CD3;
  --color-status-info-bg: #EEF4FF;

  /* ── Germany reference only ────────────────────────────────────────────── */
  --color-de-black: #171717;
  --color-de-red: #B42318;
  --color-de-gold: #D5A300;

  /* ── Typography ────────────────────────────────────────────────────────── 
     One body family and one display family; every stack has local fallbacks. */
  --font-body: "Inter", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-editorial: var(--font-display); /* alias — kept for backward compat */
  --text-step--1: 0.875rem;
  --text-step-0: 1rem;
  --text-step-1: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --text-step-2: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --text-step-3: clamp(2rem, 1.5rem + 2vw, 3.75rem);
  --line-body: 1.65;
  --line-heading: 1.15;

  /* ── Spacing Scale ─────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ── Shape and Line Geometry ────────────────────────────────────────────── */
  --radius-control: 0.75rem;
  --radius-card: 1.25rem;
  --radius-panel: 1.75rem;
  --radius-pill: 999rem;
  --border-width: 1px;

  /* ── Soft Elevation (warm shadow tint) ─────────────────────────────────── */
  --shadow-raised: 0 0.5rem 1.5rem rgb(44 30 16 / 0.10);
  --shadow-floating: 0 1.25rem 3rem rgb(44 30 16 / 0.16);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.60);

  /* ── Diffuse Matte Material (3D motifs) ────────────────────────────────── */
  --motif-diffuse: #EBE0D3;
  --motif-surface: #FFFBF5;
  --motif-edge: #A87B1A;
  --motif-shadow: rgb(44 30 16 / 0.14);
  --motif-highlight: rgb(255 255 255 / 0.72);
  --motif-reflection-opacity: 0.18;
  --motif-geometry-radius: 1rem;

  /* ── Bounded Motion ────────────────────────────────────────────────────── */
  --motion-reduced: 100ms;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-emphasis: 280ms;
  --motion-reveal: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-translate-max: 12px;
  --motion-rotate-max: 6deg;
  --motion-attract-max: 4px;

  /* ── Focus Rings ───────────────────────────────────────────────────────── */
  --color-focus-ring: #7A5500;
  --color-focus-ring-inverse: #F5E6B8;
  --focus-width: 3px;
  --focus-offset: 3px;

  /* ── Touch Targets ─────────────────────────────────────────────────────── */
  --target-size-min: 2.75rem;
  --target-size-floor: 1.5rem;
  --control-min-block: var(--target-size-min);

  /* ── Content Measures ──────────────────────────────────────────────────── */
  --content-max: 75rem;
  --reading-max: 70ch;

  /* ── Z-Index Layers ────────────────────────────────────────────────────── */
  --z-content: 1;
  --z-header: 100;
  --z-popover: 300;
  --z-dialog: 500;
  --z-status: 600;
}