:root, /* Default to light theme */
html[data-theme="light"] {
  --primary-bg: #ffffff;
  --secondary-bg: #f0f2f5;
  --tertiary-bg: #e9ecef;
  --primary-text: #1f2937;
  --secondary-text: #4b5563;
  --accent-color: #FB7299; /* Pink accent, can be adjusted */
  --accent-text: #ffffff;
  --border-color: #d1d5db;
  --border-color-light: #e5e7eb; /* Lighter border for some elements */
  --border-color-dark: #4b5563;  /* Darker border for light theme if needed */
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --selected-bg: #FB7299; /* Selected item background */
  --selected-text: #ffffff; /* Text color for selected items */
  --hover-bg: rgba(251, 114, 153, 0.1); /* Hover background with accent */
  --button-bg: var(--accent-color);
  --button-text: var(--accent-text);
  --button-hover-bg: #e06387; /* Darker accent for hover */
  --input-bg: #ffffff;
  --input-border: var(--border-color);
  --input-text: var(--primary-text);
  --disabled-bg: #e9ecef;
  --disabled-text: #6c757d;
  --card-bg: var(--primary-bg);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] {
  --primary-bg: #1a1b1f; /* Darker main background */
  --secondary-bg: #24262b; /* Slightly lighter for secondary elements */
  --tertiary-bg: #2d2f39;  /* Even lighter for cards, sidebars etc. */
  --primary-text: #f0f2f5; /* Light primary text */
  --secondary-text: #a0aec0; /* Softer secondary text */
  --accent-color: #FB7299; /* Pink accent, consistent */
  --accent-text: #ffffff;
  --border-color: #4a5568; /* Darker border */
  --border-color-light: #5a5a5e; /* For elements needing a slightly lighter border in dark mode */
  --border-color-dark: #1e1e1e;  /* For elements needing a very dark border in dark mode */
  --link-color: #63b3ed; /* Lighter blue for links in dark mode */
  --link-hover-color: #90cdf4;
  --success-color: #48bb78; /* Adjusted success color */
  --error-color: #f56565;   /* Adjusted error color */
  --warning-color: #f6e05e; /* Adjusted warning color */
  --info-color: #4fd1c5;    /* Adjusted info color */
  --selected-bg: #FB7299; /* Selected item background */
  --selected-text: #ffffff;
  --hover-bg: rgba(251, 114, 153, 0.15); /* Slightly more visible hover in dark */
  --button-bg: var(--accent-color);
  --button-text: var(--accent-text);
  --button-hover-bg: #e06387;
  --input-bg: #2d2f39; /* Dark input background */
  --input-border: #4a5568;
  --input-text: var(--primary-text);
  --disabled-bg: #2d3748;
  --disabled-text: #718096;
  --card-bg: var(--tertiary-bg);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color: var(--primary-text);
  background-color: var(--primary-bg);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  background-color: transparent;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* Add more global styles or utility classes as needed */ 