/* MindBuy fixed color system. Components consume semantic roles from here. */
:root {
  --color-brand-red: #d95a55;
  --color-brand-red-rgb: 217 90 85;
  --color-action-red: #913735;
  --color-action-deep: #612326;
  --color-text-primary: #f4f2f0;
  --color-text-body: #b8b4b1;
  --color-text-muted: #777370;
  --color-background: #0a0a0b;
  --color-atmosphere: #6a463a;
  --color-atmosphere-rgb: 106 70 58;
  --ui-accent: var(--color-brand-red);
  --ui-accent-rgb: var(--color-brand-red-rgb);
  --ui-text: var(--color-text-primary);
  --ui-body: var(--color-text-body);
  --ui-muted: var(--color-text-muted);
  --ui-radius-control: 16px;
  --ui-button-size: 18px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-button-fill:
    linear-gradient(180deg, rgb(255 235 231 / 0.14) 0%, transparent 44%),
    radial-gradient(ellipse 42% 120% at 0% 0%, rgb(240 141 132 / 0.5), transparent 64%),
    linear-gradient(
      100deg,
      rgb(183 80 76 / 0.84) 0%,
      rgb(145 55 53 / 0.8) 38%,
      rgb(105 35 37 / 0.77) 72%,
      rgb(76 23 26 / 0.74) 100%
    );
  --ui-button-shadow:
    inset 0 1px 0 rgb(255 231 227 / 0.42),
    inset 0 -10px 22px rgb(22 0 2 / 0.18),
    0 10px 30px rgb(111 31 33 / 0.24);
}