/* SaveScout AI — Warmth & Wellness theme tokens for the static legal pages.
   Mirrors the iOS SSWWTheme.swift and the Tailwind config in landing-static/index.html.
   Used by privacy.html / terms.html / security.html. */

:root {
  --surface:                 #fbf9f8;
  --surface-container-low:   #f5f3f2;
  --surface-container:       #efedec;
  --surface-container-high:  #e9e8e7;
  --surface-container-lowest:#ffffff;

  --primary:                 #895100;
  --primary-container:       #ff9f1c;
  --primary-fixed:           #ffdcbc;
  --on-primary:              #ffffff;
  --on-primary-container:    #683c00;

  --secondary:               #9f402d;
  --secondary-container:     #fd876f;
  --secondary-fixed:         #ffdad3;

  --tertiary:                #705d00;
  --tertiary-container:      #d5b209;
  --tertiary-fixed:          #ffe173;

  --on-surface:              #1b1c1b;
  --on-surface-variant:      #544434;
  --outline:                 #877462;
  --outline-variant:         #dac2ae;

  --bg:    var(--surface);
  --text:  var(--on-surface);
  --muted: var(--on-surface-variant);
  --accent: var(--primary-container);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lexend', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a {
  color: var(--primary);
  text-decoration-color: rgba(137, 81, 0, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-container); }

main { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }

h1, h2, h3, h4 {
  color: var(--on-primary-container);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.effective-date {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

p { margin: 0 0 1rem; color: var(--text); }
ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }

code, pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  background: var(--surface-container-low);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.92em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border-radius: 12px;
}

hr {
  border: 0;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.5;
  margin: 2.5rem 0;
}

/* Top bar with logo + back link */
.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 249, 248, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.85rem 1.5rem;
}
.legal-topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.legal-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-primary-container);
  text-decoration: none;
}
.legal-logo-mark {
  height: 22px;
  width: auto;
  display: inline-block;
}
.legal-back {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--on-surface-variant);
  text-decoration: none;
}
.legal-back:hover { color: var(--primary); }

/* Legacy/back-compat selectors used in the existing legal HTML files. */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.muted, .text-muted { color: var(--muted); }
.accent { color: var(--primary); }