/*
 * Shared theme tokens + dark-mode + toggle styles for Workli sub-pages
 * (privacy.html, terms.html, delete-account.html).
 *
 * Loaded after each page's own <style> so it can override --bg/--surface/etc.
 * The index.html page has these tokens inlined.
 */

[data-theme="dark"] {
  --primary: #4DA3FF;
  --text: #E8EEF7;
  --muted: #8FA5C0;
  --border: #1F324C;
  --surface: #122236;
  --bg: #0A1626;
}

/* Smooth fade for any element using these tokens */
body,
nav,
.intro-card,
.intro-card p,
h1, h2, h3, h4,
.section,
.page-wrap p,
.nav-back,
.nav-logo span {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* Nav background in dark mode (overrides the rgba(255,255,255,0.95)) */
[data-theme="dark"] nav {
  background: rgba(18, 34, 54, 0.90) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Intro card in dark mode */
[data-theme="dark"] .intro-card {
  background: rgba(77, 163, 255, 0.10) !important;
  border-color: rgba(77, 163, 255, 0.35) !important;
}
[data-theme="dark"] .intro-card p {
  color: #B5D4FF !important;
}

/* Section h2 underline keeps using --primary so it auto-adapts */

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.45s ease, border-color 0.45s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.45s ease;
}
.theme-toggle .sun {
  color: #F5A623;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}
.theme-toggle .moon {
  color: #9FB6D6;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
}
[data-theme="dark"] .theme-toggle .sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}
[data-theme="dark"] .theme-toggle .moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

/* Group toggle + back link on the nav's visual left (logical end in RTL) */
.nav-right-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── WORDMARK NAV LOGO (sub-pages) ──
 * Two image versions for theme legibility:
 *   .wordmark-light — Workli in brand blue, used on light backgrounds
 *   .wordmark-dark  — Workli in white, used on dark backgrounds
 * Override the sub-pages' inline .nav-logo img sizing (32×32 square icon)
 * so the wordmark gets natural aspect ratio at ~30px tall.
 */
.nav-logo img.wordmark-light,
.nav-logo img.wordmark-dark {
  width: auto !important;
  height: 30px !important;
  display: block;
  transition: opacity 0.45s ease, filter 0.4s ease;
}
.nav-logo:hover img.wordmark-light,
.nav-logo:hover img.wordmark-dark {
  filter: drop-shadow(0 4px 12px rgba(74,214,199,0.35));
}
/* Swap selectors match the sizing rule's specificity (0,0,2,1) on purpose
   so source order wins for display. */
.nav-logo img.wordmark-dark { display: none; }
[data-theme="dark"] .nav-logo img.wordmark-light { display: none; }
[data-theme="dark"] .nav-logo img.wordmark-dark { display: block; }