/* BMC Forum — theme tokens (light default, dark optional) */

:root, [data-theme="light"] {
  /* Surfaces */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #ececec;

  /* Borders */
  --border: #e6e6e6;
  --border-2: #d4d4d4;
  --border-strong: #c0c0c0;

  /* Text */
  --text: #1a1a1a;
  --text-dim: #555555;
  --text-mute: #888888;
  --text-onPrimary: #0a0a0a;     /* text on gold buttons */
  --text-inverse: #fafafa;       /* light text for dark surfaces */

  /* Brand */
  --gold: #b8911d;               /* darker gold for light theme contrast */
  --gold-bright: #d4a82c;
  --gold-soft: rgba(184, 145, 29, 0.08);
  --gold-soft-2: rgba(184, 145, 29, 0.16);

  /* Status */
  --green: #1f7a3a;
  --green-bg: #e6f5ec;
  --green-border: #b6dbc4;
  --red: #c92a2a;
  --red-bg: #fdecec;
  --red-border: #f0c0c0;
  --amber: #8a6a00;
  --amber-bg: #fff7d6;
  --amber-border: #e8d48a;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);

  /* Hero gradient (light) */
  --hero-bg: linear-gradient(180deg, #fff8e5 0%, #fffdf5 100%);
  --hero-border: #ead999;

  /* Code/mono blocks */
  --mono-bg: #f3efe2;
  --mono-text: #6b5410;

  /* Theme color for status bar / chrome */
  --theme-color: #fafafa;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #111111;
  --surface-2: #161616;
  --surface-3: #1c1c1c;

  --border: #222222;
  --border-2: #2a2a2a;
  --border-strong: #383838;

  --text: #e8e8e8;
  --text-dim: #888888;
  --text-mute: #555555;
  --text-onPrimary: #0a0a0a;
  --text-inverse: #1a1a1a;

  --gold: #c9a84c;
  --gold-bright: #d4b257;
  --gold-soft: rgba(201, 168, 76, 0.08);
  --gold-soft-2: rgba(201, 168, 76, 0.18);

  --green: #4caf50;
  --green-bg: #1a2a1a;
  --green-border: #2d5a2d;
  --red: #ff6b6b;
  --red-bg: #2a1414;
  --red-border: #5a2a2a;
  --amber: #c9a84c;
  --amber-bg: #1a1a10;
  --amber-border: #4a4a20;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);

  --hero-bg: linear-gradient(180deg, #141005 0%, #0d0a04 100%);
  --hero-border: #2a2210;

  --mono-bg: #161410;
  --mono-text: #c9a84c;

  --theme-color: #0a0a0a;
}

/* Smooth theme transition (skip on initial render via .no-transition) */
html:not(.no-transition) body,
html:not(.no-transition) body * {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Theme switcher button */
.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
  padding: 0;
  flex-shrink: 0;
  transition: background-color .2s, border-color .2s, color .2s;
}
.theme-toggle:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
  color: var(--text);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }