:root {
  /* Themed UI surfaces — flip with [data-theme="dark"] */
  --color-bg-page: #FFFFFF;
  --color-bg-surface: #F5F4F1;
  --color-fg-primary: #14141A;
  --color-fg-secondary: #5C5C5C;
  --color-fg-tertiary: #757575;
  --color-border-subtle: rgba(0, 0, 0, 0.10);
  --color-border-default: rgba(0, 0, 0, 0.18);
  --color-border-strong: #6B6B6B;
  --color-content-inverse: #FFFFFF;

  /* Links */
  --color-link: #2196F3;
  --color-link-hover: #1976D2;

  /* Semantic — theme-tuned for contrast */
  --color-success: #2E7D4F;
  --color-error: #B3392E;
  --color-warning: #8A6414;

  /* Fixed brand surfaces — do NOT flip with theme (compositional dark blocks, e.g. stat tiles, case-study panels, used deliberately on either a light or dark page) */
  --color-bg-black: #000000;
  --color-bg-dark: #0A0A0A;
  --color-bg-elevated: #111111;
  --color-bg-panel: #141414;
  --color-content-on-inverse: #FFFFFF;
  --color-content-on-inverse-secondary: #A6A6A6;

  /* Fixed brand accent — the cream CTA fill, same in both themes */
  --color-surface-cream: #EDEAE2;
  --color-surface-cream-fg: #14141A;

  /* Interactive */
  --color-hover-fg: rgba(20, 20, 26, 0.7);
  --color-disabled-opacity: 0.4;
}

[data-theme="dark"] {
  --color-bg-page: #0A0A0A;
  --color-bg-surface: #161616;
  --color-fg-primary: #FFFFFF;
  --color-fg-secondary: #A6A6A6;
  --color-fg-tertiary: #8A8A8A;
  --color-border-subtle: rgba(255, 255, 255, 0.10);
  --color-border-default: rgba(255, 255, 255, 0.18);
  --color-border-strong: #8C8C8C;
  --color-content-inverse: #0A0A0A;

  --color-success: #6FCB93;
  --color-error: #E88880;
  --color-warning: #E0B45B;

  --color-hover-fg: rgba(255, 255, 255, 0.7);
}