/* ===== MD3 Design Tokens ===== */
:root {
  color-scheme: dark;

  --md-sys-color-background: #0f1115;
  --md-sys-color-surface: #0f1115;
  --md-sys-color-surface-dim: #0a0b0e;
  --md-sys-color-surface-container-low: #15181d;
  --md-sys-color-surface-container: #1b1e24;
  --md-sys-color-surface-container-high: #242830;
  --md-sys-color-surface-container-highest: #2e333d;

  --md-sys-color-on-surface: #e2e2e9;
  --md-sys-color-on-surface-variant: #c4c6d0;
  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #3a3f4a;

  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #043063;
  --md-sys-color-primary-container: #1a447e;
  --md-sys-color-on-primary-container: #d3e3fd;

  --md-sys-color-secondary-container: #334458;
  --md-sys-color-on-secondary-container: #d7e3f8;

  --md-sys-color-inverse-surface: #303033;
  --md-sys-color-inverse-on-surface: #f4eff7;

  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 14px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, .3);
  --md-sys-elevation-2: 0 4px 8px rgba(0, 0, 0, .4);
  --md-sys-elevation-3: 0 8px 24px rgba(0, 0, 0, .5);
}

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

  --md-sys-color-background: #f8f9ff;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-surface-dim: #dfe0e6;
  --md-sys-color-surface-container-low: #f2f3f8;
  --md-sys-color-surface-container: #eceef3;
  --md-sys-color-surface-container-high: #e6e8ed;
  --md-sys-color-surface-container-highest: #e0e2e7;

  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;

  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #043063;

  --md-sys-color-secondary-container: #d7e3f8;
  --md-sys-color-on-secondary-container: #101c2b;

  --md-sys-color-inverse-surface: #303033;
  --md-sys-color-inverse-on-surface: #f4eff7;

  --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, .1);
  --md-sys-elevation-2: 0 3px 6px rgba(0, 0, 0, .12);
  --md-sys-elevation-3: 0 8px 20px rgba(0, 0, 0, .16);
}