:root {
  color-scheme: light;

  --color-page-bg: #fafafa;
  --color-surface: #f5f5f5;
  --color-input-bg: #fafafa;
  --color-input-hover: #e4e4e4;

  --color-text: #0a0a0a;
  --color-text-muted: #727272;
  --color-text-inverse: #eff6ff;

  --color-border: #d4d4d4;
  --color-border-muted: #a0a0a0;
  --color-border-focus: #165dfc;

  --color-nav-primary: #2c7fff;

  --color-primary: #2c7fff;
  --color-primary-hover: #165dfc;
  --color-primary-active: #162455;

  --color-secondary-border: #a0a0a0;
  --color-secondary-text: #727272;
  --color-secondary-hover-bg: #e4e4e4;
  --color-secondary-hover-border: #d4d4d4;
  --color-secondary-active-bg: #a0a0a0;
  --color-secondary-active-border: #a0a0a0;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 4px 4px rgba(14, 14, 14, 0.15);
}

html.dark-mode {
  color-scheme: dark;

  --color-page-bg: #171717;
  --color-surface: #171717;
  --color-input-bg: #1d1d1d;
  --color-input-hover: #2a2a2a;

  --color-text: #f5f5f5;
  --color-text-muted: #b0b0b0;
  --color-text-inverse: #eff6ff;

  --color-border: #3a3a3a;
  --color-border-muted: #5a5a5a;
  --color-border-focus: #4c8dff;

  --color-nav-primary: #171717;

  --color-primary: #2c7fff;
  --color-primary-hover: #4c8dff;
  --color-primary-active: #1d3f91;

  --color-secondary-border: #5a5a5a;
  --color-secondary-text: #d0d0d0;
  --color-secondary-hover-bg: #2a2a2a;
  --color-secondary-hover-border: #6a6a6a;
  --color-secondary-active-bg: #404040;
  --color-secondary-active-border: #404040;

  --card-border-color : 1px solid #515151; 
  --shadow-card: #262626;
  --shadow-focus: rgba(255, 255, 255, 0.08);
}