:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* Signature dark palette */
  --bg: #0B0D0F;
  --bg2: #13161A;
  --bg3: #1C2026;
  --text: #F7F8FA;
  --muted: #A9B0BA;
  --dim: #737C88;
  --accent: #58E1C1;
  --accent2: #3BB89A;
  --accent3: #7AF2D8;
  --accent-ink: #07110E;
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.14);

  /* Semantic surfaces */
  --surface: var(--bg2);
  --surface-raised: rgba(19, 22, 26, 0.94);
  --card: var(--bg3);
  --card2: var(--bg2);
  --surface-inset: rgba(5, 6, 7, 0.58);
  --surface-nav: rgba(11, 13, 15, 0.82);
  --surface-hover: rgba(28, 32, 38, 0.96);

  /* Accent treatments */
  --accent-dim: rgba(88, 225, 193, 0.11);
  --accent-soft: rgba(88, 225, 193, 0.055);
  --accent-glow: rgba(88, 225, 193, 0.28);
  --accent-border: rgba(88, 225, 193, 0.30);

  /* Atmosphere and elevation */
  --grid-line: rgba(88, 225, 193, 0.032);
  --ambient-strong: rgba(88, 225, 193, 0.11);
  --ambient-soft: rgba(88, 225, 193, 0.055);
  --page-fade: rgba(11, 13, 15, 0.94);
  --shadow-color: rgba(0, 0, 0, 0.30);
  --shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 30px 100px var(--shadow-color);

  /* Status */
  --danger: #F6B66B;
  --danger-soft: rgba(246, 182, 107, 0.11);
  --success: var(--accent);
  --focus-ring: rgba(88, 225, 193, 0.18);
}

html[data-theme="light"] {
  color-scheme: light;

  /* Cold-mist light palette: intentionally not pure white */
  --bg: #EEF2F0;
  --bg2: #F8FAF9;
  --bg3: #E3E9E6;
  --text: #151A18;
  --muted: #56615D;
  --dim: #77827E;
  --accent: #137A66;
  --accent2: #0C6656;
  --accent3: #1C947C;
  --accent-ink: #F7FFFC;
  --border: rgba(21, 26, 24, 0.10);
  --border2: rgba(21, 26, 24, 0.18);

  --surface: var(--bg2);
  --surface-raised: rgba(248, 250, 249, 0.94);
  --card: var(--bg3);
  --card2: var(--bg2);
  --surface-inset: rgba(223, 230, 226, 0.72);
  --surface-nav: rgba(238, 242, 240, 0.86);
  --surface-hover: #DFE7E3;

  --accent-dim: rgba(19, 122, 102, 0.11);
  --accent-soft: rgba(19, 122, 102, 0.055);
  --accent-glow: rgba(19, 122, 102, 0.16);
  --accent-border: rgba(19, 122, 102, 0.32);

  --grid-line: rgba(19, 122, 102, 0.052);
  --ambient-strong: rgba(19, 122, 102, 0.10);
  --ambient-soft: rgba(19, 122, 102, 0.05);
  --page-fade: rgba(238, 242, 240, 0.93);
  --shadow-color: rgba(28, 45, 39, 0.12);
  --shadow-soft: 0 14px 38px rgba(28, 45, 39, 0.08);
  --shadow-card: 0 24px 72px var(--shadow-color);

  --danger: #9A5B16;
  --danger-soft: rgba(154, 91, 22, 0.10);
  --success: var(--accent);
  --focus-ring: rgba(19, 122, 102, 0.18);
}

:root {
  /* Typography */
  --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --wrap: 1120px;
  --wrap-narrow: 840px;
  --radius-sharp: 2px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --transition-theme: 180ms ease;
}