/* ===== Elegant Emerald Theme ===== */

/* -------- Light Theme -------- */
:root {
  --primary: #0e221a;
  --on-primary: #eaf5ef;
  --primary-container: rgba(255,255,255,0.06);
  --on-primary-container: #eaf5ef;

  --secondary: #19c37d;
  --on-secondary: #03130c;

  --background: #0b1a14;
  --on-background: #eaf5ef;

  --surface: #0e221a;
  --on-surface: #eaf5ef;

  --error: #B3261E;
  --on-error: #FFFFFF;
  --error-container: #8C1D18;
  --on-error-container: #FFDAD6;

  --outline: rgba(255,255,255,0.06);
  --surface-variant: #0e221a;
  --on-surface-variant: #a8c7b6;

  --accent-link: #19c37d;
  --accent-link-visited: #0f6b45;
  --accent-live: #19c37d;
  --accent-success: #19c37d;
  --accent-info: #a8c7b6;
  --favorite-row: var(--primary);
  --active-row: color-mix(in srgb, var(--primary) 10%, transparent);
  --hover-primary: color-mix(in srgb, var(--primary) 85%, var(--on-primary));
  --hover-link: color-mix(in srgb, var(--accent-link) 85%, var(--on-surface));
  --scrollbar-track: var(--surface-variant);
  --scrollbar-thumb: var(--outline);
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.55);
  --shadow-xl: 0 4px 6px rgba(0,0,0,0.7);
  --shadow-side-right: 2px 0 5px rgba(0,0,0,0.7);
  --shadow-side-left: -2px 0 5px rgba(0,0,0,0.7);
  --overlay-bg: rgba(0,0,0,0.6);
  --overlay-strong: rgba(0,0,0,0.8);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.8);
  --shadow-xxl: 0 8px 20px rgba(0,0,0,0.4);
}

/* -------- Dark Theme -------- */
[data-theme="dark"] {
  --primary: #0e221a;
  --on-primary: #eaf5ef;
  --primary-container: rgba(255,255,255,0.06);
  --on-primary-container: #eaf5ef;

  --secondary: #19c37d;
  --on-secondary: #03130c;

  --background: #0b1a14;
  --on-background: #eaf5ef;

  --surface: #0e221a;
  --on-surface: #eaf5ef;

  --error: #B3261E;
  --on-error: #FFFFFF;
  --error-container: #8C1D18;
  --on-error-container: #FFDAD6;

  --outline: rgba(255,255,255,0.06);
  --surface-variant: #0e221a;
  --on-surface-variant: #a8c7b6;

  --accent-link: #19c37d;
  --accent-link-visited: #0f6b45;
  --accent-live: #19c37d;
  --accent-success: #19c37d;
  --accent-info: #a8c7b6;
  --favorite-row: var(--primary);
  --active-row: color-mix(in srgb, var(--primary) 30%, transparent);
  --hover-primary: color-mix(in srgb, var(--primary) 80%, var(--on-primary));
  --hover-link: color-mix(in srgb, var(--accent-link) 70%, var(--on-surface));
  --scrollbar-track: var(--surface);
  --scrollbar-thumb: var(--outline);
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.55);
  --shadow-xl: 0 4px 6px rgba(0,0,0,0.7);
  --shadow-side-right: 2px 0 5px rgba(0,0,0,0.7);
  --shadow-side-left: -2px 0 5px rgba(0,0,0,0.7);
  --overlay-bg: rgba(0,0,0,0.6);
  --overlay-strong: rgba(0,0,0,0.8);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.8);
  --shadow-xxl: 0 8px 20px rgba(0,0,0,0.4);
}

/* Accessible, high-contrast focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-link);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-link) 25%, transparent);
}