/* Global theme variables for Light/Dark + sensible mobile defaults */
:root {
  /* Core palette used across frontends */
  --bg-shell:#e2e6f0;
  --bg-white:#ffffff;
  --text-main:#23272f;
  --text-secondary:#2f3440;
  --border-soft:#d8dde5;
  --primary:#06a78c;
  --focus-ring:#19b89d55;

  /* Mobile Explore palette (light) */
  --bg-root:#EEF1F6;
  --bg-card:#ffffff;
  --text-primary:#0F172A;
  --text-secondary:#64748B; /* note: same var name reused across sites */
  --border:#E2E8F0;
  --accent:#02A077;
}

/* System preference when user selected 'system' (no data-theme attribute present) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-shell:#12171c;
    --bg-white:#1d242b;
    --text-main:#f1f5f9;
    --text-secondary:#c5ced8;
    --border-soft:#2c3742;

    /* Mobile explore (dark) */
    --bg-root:#0E141B;
    --bg-card:#121923;
    --text-primary:#E6EDF7;
    --text-secondary:#9AA5B1;
    --border:#253041;
    --accent:#06B293; /* slightly brighter in dark */
  }
}

/* Explicit overrides when user forces a theme */
html[data-theme='dark'] {
  --bg-shell:#12171c;
  --bg-white:#1d242b;
  --text-main:#f1f5f9;
  --text-secondary:#c5ced8;
  --border-soft:#2c3742;

  --bg-root:#0E141B;
  --bg-card:#121923;
  --text-primary:#E6EDF7;
  --text-secondary:#9AA5B1;
  --border:#253041;
  --accent:#06B293;
}

html[data-theme='light'] {
  --bg-shell:#e2e6f0;
  --bg-white:#ffffff;
  --text-main:#23272f;
  --text-secondary:#2f3440;
  --border-soft:#d8dde5;

  --bg-root:#EEF1F6;
  --bg-card:#ffffff;
  --text-primary:#0F172A;
  --text-secondary:#64748B;
  --border:#E2E8F0;
  --accent:#02A077;
}

/* Utility aliases to avoid duplication across templates */
:root {
  --surface:#fff; /* alias for backgrounds */
}
html[data-theme='dark'] {
  --surface:#121923;
}