/* Budget Security. Loaded after the app stylesheet; tokens are defined in src/index.css. */

:root {
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  /* Warm stone neutrals (budgetsecurity.com) */
  --color-gray-50: #fbfaf9;
  --color-gray-100: #f3f1ed;
  --color-gray-200: #e6e4e0;
  --color-gray-300: #d4d1cb;
  --color-gray-400: #9c9a96;
  --color-gray-500: #73716c;
  --color-gray-600: #585650;
  --color-gray-700: #3f3e3a;
  --color-gray-800: #232326;
  --color-gray-900: #0c0c0d;
  --color-gray-950: #080809;

  /* Logo orange #ff6600, same as marketing --brand-orange */
  --brand-base: #ff6600;
  --color-brand-25: #fffbf8;
  --color-brand-50: #fff9f5;
  --color-brand-100: #ffedd9;
  --color-brand-200: #ffd4a8;
  --color-brand-300: #ffb066;
  --color-brand-400: #ff8b3d;
  --color-brand-500: #ff6600;
  --color-brand-600: #e65c00;
  --color-brand-700: #b34400;
  --color-brand-800: #8a3400;
  --color-brand-900: #5c2200;

  --brand-hover: #ff781f;
  --page-bg: #fbfaf9;
  --page-fg: #0c0c0d;
  --page-muted: #585650;
  --page-border: #e6e4e0;
  --surface: #ffffff;
  --promo-bg: #fff5f2;
  --promo-border: #ffd8c8;
  /* The brand orange doubles as the "high" severity color. */
  --severity-high: #ff6600;
}

[data-theme="dark"] {
  --brand-hover: #ff8b3d;
  --page-bg: #0c0c0d;
  --page-fg: #f4f3f1;
  --page-muted: #9c9a96;
  --page-border: #222225;
  --surface: #101013;
  --promo-bg: #1a1520;
  /* Same outline as the other dark cards (border-white/10). */
  --promo-border: rgb(255 255 255 / 0.1);
}