:root {
  /* Base surfaces */
  --xxi-bg-base: #F7F4EF;      /* off-white / main background */
  --xxi-bg-soft: #F0EBE3;      /* cards, header lower band */
  --xxi-bg-subtle: #E0D7CC;    /* subtle fills, separators */
  --xxi-bg-input: #F7F4EF;

  /* Borders */
  --xxi-border-subtle: #E0D7CC;

  /* Text */
  --xxi-text-default: #272422;
  --xxi-text-soft: #8C8378;
  --xxi-text-muted: #8C8378;
  --xxi-text-on-copper: #F7F4EF;

  /* Brand copper */
  --xxi-copper: #B46B3C;
  --xxi-copper-dark: #8E4F24;

  /* Icons */
  --xxi-icon-default: #272422;
  --xxi-icon-on-copper: #F7F4EF;

  /* Radii */
  --xxi-radius-sm: 6px;
  --xxi-radius-md: 10px;
  --xxi-radius-lg: 18px;
  --xxi-radius-pill: 999px;

  /* Shadow */
  --xxi-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04);

  /* Header gradient (match hero tone) */
  --xxi-header-gradient: linear-gradient(135deg, #B46B3C 0%, #8E4F24 70%);

  /* Legacy tokens kept for compatibility with older CSS */
  --bg: var(--xxi-bg-base);
  --card: var(--xxi-bg-soft);
  --accent: var(--xxi-copper);
  --accent-soft: #D9A07A;
  --fg: var(--xxi-text-default);
  --muted: var(--xxi-text-soft);
}