:root {
  --ui-background: #f5f6f6;
  --ui-canvas: var(--ui-background);
  --ui-surface: #ffffff;
  --ui-surface-subtle: #fafbfb;
  --ui-text: #25282a;
  --ui-text-muted: #676a6c;
  --ui-graphite: var(--ui-text);
  --ui-muted: var(--ui-text-muted);
  --ui-border: #d9dddf;
  --ui-primary: #676a6c;
  --ui-primary-hover: #55585a;
  --ui-primary-soft: #eceeef;
  --ui-on-primary: #ffffff;
  --ui-accent: #b89a5b;
  --ui-accent-hover: #a7894c;
  --ui-accent-soft: #f4eedf;
  --ui-accent-text: #6d5932;
  --ui-focus: #b89a5b;
  --ui-focus-ring: rgba(184, 154, 91, .42);
  --ui-brand-black: #090a0a;
  --ui-brand-yellow: #ffdc00;
  --ui-brand-yellow-hover: #e8c800;
  --ui-warm-white: #f6f4ef;
  --ui-stainless: #eceeeb;
  --ui-steel: #8a908f;
  --ui-success: #17623b;
  --ui-danger: #a54237;
  --ui-radius: 12px;
  --ui-radius-small: 8px;
  --ui-shadow: 0 8px 24px rgba(37, 40, 42, .08);
  --ui-content-max: 1420px;
  --ui-content-gutter: 20px;
  --bg: var(--ui-canvas);
  --paper: var(--ui-surface);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-text-muted);
  --accent: var(--ui-primary);
  --accent-dark: var(--ui-primary-hover);
  --accent-soft: var(--ui-accent-soft);
}
