/* CSS Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Base/shared variables */
  --text-color: #1a1a1a;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --border-color: #e8e8e8;
  --bg-color: #f8f9fa;
  --bg-hover: #f1f3f4;
  --white: #ffffff;
  --danger-color: #d93025;
  --success-color: #1e8e3e;

  /* Layout */
  --nav-height: 64px;
  --top-nav-height: 52px;
  --content-max-width: 540px;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;

  /* Default theme (blue) */
  --primary-color: #1a73e8;
  --primary-light: #e8f0fe;
  --primary-dark: #1557b0;
  --secondary-color: #5094ed;
  --primary-rgb: 26, 115, 232;
}

/* Blue Theme */
[data-theme="blue"] {
  --primary-color: #1a73e8;
  --primary-light: #e8f0fe;
  --primary-dark: #1557b0;
  --secondary-color: #5094ed;
  --primary-rgb: 26, 115, 232;
}

/* Green Theme */
[data-theme="green"] {
  --primary-color: #1e8e3e;
  --primary-light: #e6f4ea;
  --primary-dark: #137333;
  --secondary-color: #34a853;
  --primary-rgb: 30, 142, 62;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}