/*
 * Shared design tokens (light + dark) and base reset.
 * Any page in the app can rely on these custom properties and the
 * .glass-panel utility for the frosted-glass look.
 */

:root {
  color-scheme: light;

  --color-bg-1: #eef2ff;
  --color-bg-2: #e0f2fe;
  --blob-1: #7dd3fc;
  --blob-2: #c4b5fd;
  --blob-3: #fbcfe8;

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: rgba(31, 41, 55, 0.15);

  --text-primary: #1c1c1e;
  --text-secondary: #48484a;
  --text-muted: #6e6e73;

  --input-bg: rgba(255, 255, 255, 0.6);
  --input-border: rgba(60, 60, 67, 0.18);
  --input-border-focus: #0a84ff;

  --accent: #0a84ff;
  --accent-strong: #0060df;
  --accent-contrast: #ffffff;

  --danger-bg: rgba(255, 59, 48, 0.12);
  --danger-border: rgba(255, 59, 48, 0.35);
  --danger-text: #d70015;

  --switcher-bg: rgba(255, 255, 255, 0.5);
  --switcher-border: rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-1: #0b1220;
  --color-bg-2: #111827;
  --blob-1: #1d4ed8;
  --blob-2: #6d28d9;
  --blob-3: #9d174d;

  --glass-bg: rgba(30, 30, 34, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.45);

  --text-primary: #f5f5f7;
  --text-secondary: #d1d1d6;
  --text-muted: #a1a1a6;

  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.14);
  --input-border-focus: #409cff;

  --accent: #409cff;
  --accent-strong: #0a84ff;
  --accent-contrast: #ffffff;

  --danger-bg: rgba(255, 69, 58, 0.16);
  --danger-border: rgba(255, 69, 58, 0.4);
  --danger-text: #ff6961;

  --switcher-bg: rgba(255, 255, 255, 0.08);
  --switcher-border: rgba(255, 255, 255, 0.14);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: var(--color-bg-1);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 32px var(--glass-shadow);
}

/*
 * Primary action pill — the app's general "do the main thing" button
 * (Add family member, Save, ...), everywhere except the login-style cards,
 * which keep their own full-width .btn-submit. Pill-shaped like every
 * other control in the app (header buttons, .pill-toggle, sidebar's
 * active-icon gradient) rather than .btn-submit's square-ish corners and
 * 100%-width login-card sizing.
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

/*
 * Language switcher + theme toggle. Every page offers both (see
 * includes/functions.php: render_lang_theme_switcher()) — shared here so
 * the app header and the standalone auth pages (login/change-password/
 * reset-password) don't each redefine them.
 */
.lang-switcher {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--switcher-bg);
  border: 1px solid var(--switcher-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.lang-switcher button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-switcher button:hover:not(.is-active) {
  background: rgba(10, 132, 255, 0.12);
  color: var(--text-primary);
}
.lang-switcher button.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--switcher-border);
  background: var(--switcher-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-secondary);
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(10, 132, 255, 0.12);
  color: var(--text-primary);
}
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }