/* CSS Variables and Theme Colors */
:root {
  /* Brand & Accent Colors */
  --brand: #4e8cff; /* Primary brand color */
  --accent: #ff6b6b; /* Accent color for attention */
  --success: #4caf50; /* Green for success states */
  --warning: #ffc107; /* Yellow for warnings */
  --danger: #f44336; /* Red for errors or destructive actions */

  /* Light Theme (default) */
  --bg: #f7f9fc; /* Light, neutral background */
  --bg-secondary: #ffffff; /* Secondary background */
  --fg: #1a1a1a; /* Dark text color for readability */
  --text: #1a1a1a; /* Text color */
  --card: #ffffff; /* White background for card elements */
  --card-bg: #ffffff; /* White background for cards */
  --muted: #6b7280; /* Muted color for secondary text */
  --border: #e5e7eb; /* Light border color */
  --primary: #4e8cff; /* Primary color */
  --primary-light: rgba(78, 140, 255, 0.1); /* Primary light background */
  --primary-rgb: 78, 140, 255; /* Primary RGB values */
  --info: #2196f3; /* Info color */
  --info-bg: #e3f2fd; /* Info background */
  --info-text: #0d47a1; /* Info text */

  /* Toast Notification Colors (Light Theme) */
  --toast-bg-info: var(--info-bg); /* Light info background */
  --toast-fg-info: var(--info-text); /* Dark info text */
  --toast-bg-warning: #fef3c7; /* Light amber background */
  --toast-fg-warning: #92400e; /* Dark amber text */
  --toast-bg-error: #fee2e2; /* Light red background */
  --toast-fg-error: #991b1b; /* Dark red text */
  --toast-bg-success: #dcfce7; /* Light green background */
  --toast-fg-success: #065f46; /* Dark green text */

  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Shared UI Properties */
  --radius: 6px; /* Rounded corners for elements */
  --shadow: 0 2px 4px rgba(0, 0, 0, .06); /* Subtle shadow for depth */
  --mono-font: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Typography */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark Theme Variables */
:root[data-theme="dark"] {
  --brand: #82aaff;
  --bg: #1e1e1e;
  --bg-secondary: #2e2e2e;
  --fg: #ffffff;
  --text: #ffffff;
  --card: #2e2e2e;
  --card-bg: #2e2e2e;
  --muted: #a5a5a5;
  --border: #444444;
  --primary: #82aaff;
  --primary-light: rgba(130, 170, 255, 0.1);
  --primary-rgb: 130, 170, 255;
  --info: #64b5f6;
  --info-bg: #1e3a5f;
  --info-text: #bbdefb;

  /* Toast Notification Colors for Dark Theme */
  --toast-bg-info: #2e2e2e; /* Dark gray for general notifications */
  --toast-fg-info: #ffffff; /* White text for info toasts */
  --toast-bg-warning: #d97706; /* Darker amber for warnings */
  --toast-fg-warning: #ffffff; /* White text for warning toasts */
  --toast-bg-error: #b91c1c; /* Darker red for errors */
  --toast-fg-error: #ffffff; /* White text for error toasts */
  --toast-bg-success: #047857; /* Darker green for success */
  --toast-fg-success: #ffffff; /* White text for success toasts */

  --shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* Auto Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #82aaff;
    --bg: #1e1e1e;
    --bg-secondary: #2e2e2e;
    --fg: #ffffff;
    --text: #ffffff;
    --card: #2e2e2e;
    --card-bg: #2e2e2e;
    --muted: #a5a5a5;
    --border: #444444;
    --primary: #82aaff;
    --primary-light: rgba(130, 170, 255, 0.1);
    --primary-rgb: 130, 170, 255;
    --info: #64b5f6;
    --info-bg: #1e3a5f;
    --info-text: #bbdefb;

    /* Toast Notification Colors for Auto Dark Theme */
    --toast-bg-info: #2e2e2e; /* Dark gray for general notifications */
    --toast-fg-info: #ffffff; /* White text for info toasts */
    --toast-bg-warning: #d97706; /* Darker amber for warnings */
    --toast-fg-warning: #ffffff; /* White text for warning toasts */
    --toast-bg-error: #b91c1c; /* Darker red for errors */
    --toast-fg-error: #ffffff; /* White text for error toasts */
    --toast-bg-success: #047857; /* Darker green for success */
    --toast-fg-success: #ffffff; /* White text for success toasts */

    --shadow: 0 2px 4px rgba(0,0,0,.3);
    --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    --mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  }
}