/* ===== Theme A: Sage & Earth ===== */
/* Organic, nature-inspired, warm & grounded */
/* Fonts: DM Sans (body) + Fraunces (display) */

/* Font assignment */
[data-theme="sage"] {
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

/* --- Light Mode (default) --- */
[data-theme="sage"][data-mode="light"],
[data-theme="sage"]:not([data-mode]) {
  /* Backgrounds */
  --bg-base: #FDFAF6;
  --bg-surface: #F5F0EA;
  --bg-elevated: #EDE6DD;
  --bg-overlay: rgba(253, 250, 246, 0.92);
  --bg-brand: #5B8C6F;

  /* Primary */
  --color-primary: #5B8C6F;
  --color-primary-text: #3D6B50;
  --color-primary-hover: #4A7A5E;
  --color-primary-light: rgba(91, 140, 111, 0.12);
  --color-primary-rgb: 91, 140, 111;

  /* Accent */
  --color-accent: #C47B5A;
  --color-accent-text: #9A5A3E;
  --color-accent-hover: #B06A49;
  --color-accent-light: rgba(196, 123, 90, 0.12);

  /* Status */
  --color-success: #3D8B5E;
  --color-warning: #C4923A;
  --color-danger: #C14A39;
  --color-info: #3B82B8;

  /* Text */
  --text-primary: #2A2A2E;
  --text-secondary: #4A4A50;
  --text-muted: #6B6B73;
  --text-inverse: #FDFAF6;
  --text-on-primary: #FFFFFF;

  /* Borders */
  --border-subtle: rgba(42, 42, 46, 0.08);
  --border-default: rgba(42, 42, 46, 0.15);
  --border-strong: rgba(42, 42, 46, 0.25);
  --border-focus: #3D6B50;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(42, 42, 46, 0.06), 0 1px 2px rgba(42, 42, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(42, 42, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(42, 42, 46, 0.10);
  --shadow-xl: 0 16px 48px rgba(42, 42, 46, 0.12);

  /* Focus */
  --color-focus: #3D6B50;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #5B8C6F, #7BA68D);
  --gradient-accent: linear-gradient(135deg, #C47B5A, #D4956A);
  --gradient-surface: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-surface) 100%);

  /* Chart palette */
  --chart-1: #5B8C6F;
  --chart-2: #C47B5A;
  --chart-3: #7BA68D;
  --chart-4: #D4956A;
  --chart-5: #8B6B5E;
  --chart-6: #A3C4B0;
  --chart-grid: rgba(42, 42, 46, 0.08);
  --chart-text: #6B6B73;

  /* Scrollbar */
  --scrollbar-track: var(--bg-surface);
  --scrollbar-thumb: rgba(42, 42, 46, 0.20);
}

/* --- Dark Mode --- */
[data-theme="sage"][data-mode="dark"] {
  /* Backgrounds */
  --bg-base: #0F1A14;
  --bg-surface: #162420;
  --bg-elevated: #1C2E26;
  --bg-overlay: rgba(15, 26, 20, 0.92);
  --bg-brand: #4A7A5E;

  /* Primary */
  --color-primary: #4A7A5E;
  --color-primary-text: #6B9E7F;
  --color-primary-hover: #5A8A6E;
  --color-primary-light: rgba(74, 122, 94, 0.15);
  --color-primary-rgb: 74, 122, 94;

  /* Accent */
  --color-accent: #D4956A;
  --color-accent-text: #D4956A;
  --color-accent-hover: #E0A57A;
  --color-accent-light: rgba(212, 149, 106, 0.12);

  /* Status */
  --color-success: #6B9E7F;
  --color-warning: #D4A566;
  --color-danger: #D06B5A;
  --color-info: #4A8EC4;

  /* Text */
  --text-primary: #F0EDE8;
  --text-secondary: rgba(240, 237, 232, 0.70);
  --text-muted: rgba(240, 237, 232, 0.50);
  --text-inverse: #0F1A14;
  --text-on-primary: #FFFFFF;

  /* Borders */
  --border-subtle: rgba(240, 237, 232, 0.06);
  --border-default: rgba(240, 237, 232, 0.10);
  --border-strong: rgba(240, 237, 232, 0.18);
  --border-focus: #6B9E7F;

  /* Shadows (darker in dark mode) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);

  /* Focus */
  --color-focus: #6B9E7F;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4A7A5E, #5A8A6E);
  --gradient-accent: linear-gradient(135deg, #D4956A, #E0A57A);
  --gradient-surface: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-surface) 100%);

  /* Chart palette */
  --chart-1: #6B9E7F;
  --chart-2: #D4956A;
  --chart-3: #5A8A6E;
  --chart-4: #E0A57A;
  --chart-5: #A08070;
  --chart-6: #8BC4A0;
  --chart-grid: rgba(240, 237, 232, 0.06);
  --chart-text: rgba(240, 237, 232, 0.50);

  /* Scrollbar */
  --scrollbar-track: var(--bg-surface);
  --scrollbar-thumb: rgba(240, 237, 232, 0.15);
}