/* ProMan visual foundation. Legacy names remain aliases during migration. */
:root {
  color-scheme: dark;
  --bg: #101216;
  --bg2: #181b21;
  --bg3: #22262e;
  --bg4: #2b303a;
  --border: #303641;
  --border2: #505968;
  --accent: #f5b544;
  --accent2: #ffc766;
  --accent3: #ffdb98;
  --green: #5ed4a1;
  --red: #ff8585;
  --blue: #88b8ff;
  --purple: #c6a0ff;
  --text: #f0f2f5;
  --text2: #bdc4d0;
  --text3: #a0aab9;
  --font: 'Sarabun', system-ui, sans-serif;
  --mono: 'Sarabun', system-ui, sans-serif;
  --radius: 10px;
  --radius2: 16px;
  --shadow: 0 16px 48px rgb(0 0 0 / 28%);
  --ui-focus: #a9ccff;
  --ui-danger-solid: #b52b37;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  /* Standalone HR and mobile surfaces share the same palette. */
  --surface: var(--bg2);
  --surface-2: var(--bg3);
  --surface-3: var(--bg4);
  --line: var(--border);
  --muted: var(--text2);
  --subtle: var(--text3);
  --brand: var(--accent);
  --brand-strong: var(--accent2);
}