/* Monochrome Color Palette Variables */

:root {
  /* Default to Light Mode values */
  --bg-color: #f2f2f2;         /* Light gray background */
  --pill-bg: rgba(255, 255, 255, 0.75); /* Semi-transparent white */
  --pill-border: rgba(255, 255, 255, 0.6);      /* Sharp 1px white border with 60% opacity */
  --text-color: #000000;       /* Deep black */
  --shadow-color: rgba(0, 0, 0, 0.08); /* Subtle diffused box shadow */
  --card-bg: #ffffff;          /* Solid white for cards */
  --card-border: transparent;  /* Removed card border */
  --focus-outline: #000000;
  --accent-color: #333333;
}

/* System preferences fallback to Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000000;       /* Pure black background */
    --pill-bg: rgba(30, 30, 30, 0.75); /* Semi-transparent dark gray */
    --pill-border: rgba(26, 26, 26, 0.6);    /* Matches dark card color with 60% opacity */
    --text-color: #ffffff;     /* Pure white */
    --shadow-color: rgba(0, 0, 0, 0.4); /* Black shadow for depth separation */
    --card-bg: #1a1a1a;        /* Dark gray for cards */
    --card-border: transparent;/* Removed card border */
    --focus-outline: #ffffff;
    --accent-color: #cccccc;
  }
}

/* Explicit Light Mode Override */
[data-theme="light"] {
  --bg-color: #f2f2f2;
  --pill-bg: rgba(255, 255, 255, 0.75);
  --pill-border: rgba(255, 255, 255, 0.6);
  --text-color: #000000;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --card-border: transparent;
  --focus-outline: #000000;
  --accent-color: #333333;
}

/* Explicit Dark Mode Override */
[data-theme="dark"] {
  --bg-color: #000000;
  --pill-bg: rgba(30, 30, 30, 0.75);
  --pill-border: rgba(26, 26, 26, 0.6);
  --text-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --card-bg: #1a1a1a;
  --card-border: transparent;
  --focus-outline: #ffffff;
  --accent-color: #cccccc;
}