:root {
  --bg-ink: #08090b;
  --bg-panel: #111418;
  --bg-panel-strong: #171b20;
  --bg-soft: #1b1618;
  --bg-highlight: #25191d;
  --surface-line: rgba(215, 183, 122, 0.18);
  --surface-line-strong: rgba(215, 183, 122, 0.42);
  --text-strong: #f7f1e8;
  --text-body: #d6cbbd;
  --text-muted: #a79a8d;
  --text-soft: #82776d;
  --accent: #d7b77a;
  --accent-strong: #efd19a;
  --accent-deep: #7e5630;
  --accent-gradient: linear-gradient(135deg, #efd19a 0%, #b88b4d 100%);
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 22px 56px rgba(0, 0, 0, 0.3);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --container: min(1560px, calc(100vw - 96px));
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Manrope", sans-serif;
  --transition: 220ms ease;

  /* Semantic aliases: product code consumes roles while the visual primitives stay replaceable. */
  --surface-canvas: var(--bg-ink);
  --surface-raised: var(--bg-panel);
  --surface-sunken: var(--bg-soft);
  --surface-accent: var(--bg-highlight);
  --border-default: var(--surface-line);
  --border-strong: var(--surface-line-strong);
  --border-focus: var(--accent-strong);
  --focus-ring: 0 0 0 3px rgba(239, 209, 154, 0.28);
  --control-height: 44px;
  --panel-padding: 24px;
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
}