:root {
  color-scheme: dark;
  --color-canvas: #090b10;
  --color-canvas-deep: #06070b;
  --color-surface: #12151d;
  --color-surface-raised: #1b1e28;
  --color-surface-soft: #161923;
  --color-ember: #d96b2c;
  --color-ember-light: #ef8a45;
  --color-orange-mid: #be5619;
  --color-orange-deep: #7d360d;
  --color-link: #e6a467;
  /* Legacy variable names remain for older feature CSS, but all resolve to
     the orange family sampled from the supplied SH mark. */
  --color-crimson: var(--color-orange-mid);
  --color-red-deep: var(--color-orange-deep);
  --color-violet: var(--color-orange-deep);
  --color-rose: var(--color-orange-mid);
  --color-amber: var(--color-link);
  --color-text: #f4ece4;
  --color-text-soft: #d6cbc2;
  --color-muted: #b2a9a1;
  --color-line: rgba(244, 236, 228, 0.15);
  --color-line-strong: rgba(217, 107, 44, 0.5);
  --gradient-ember: linear-gradient(112deg, #ef8a45 0%, #cf681f 52%, #904412 112%);
  --gradient-ember-soft: linear-gradient(112deg, rgba(239, 138, 69, 0.15), rgba(190, 86, 25, 0.11) 55%, rgba(125, 54, 13, 0.1));
  --gradient-panel: linear-gradient(145deg, rgba(27, 30, 40, 0.98), rgba(14, 16, 23, 0.99));
  --gradient-atmosphere: radial-gradient(circle at 12% -4%, rgba(125, 54, 13, 0.14), transparent 34%), radial-gradient(circle at 88% 2%, rgba(217, 107, 44, 0.12), transparent 31%), linear-gradient(180deg, #0d0f15 0%, #090b10 52%, #06070b 100%);
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-body: Inter, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 22px 60px rgba(0, 0, 0, 0.28);
  --shadow-focus: 0 0 0 3px rgba(217, 107, 44, 0.2);
  --content-width: 1480px;
}