/* ======================================================
   WAGET — Legal / Long Document pages
   (privacy-policy · terms-of-use · account-deletion)
   Loads after css/tokens.css + css/style.css.
   Aliases the previous token names so the existing
   .policy-* content styles resolve to the new system.
   ====================================================== */

:root {
  --text-1:    var(--ink);
  --text-2:    var(--ink-2);
  --text-3:    var(--ink-3);
  --border:    var(--rule);
  --blue:      var(--accent-deep);
  --bg:        var(--paper);
  --surface:   var(--paper-2);
  --surface-2: var(--paper-3);
}

/* Long Document body — refine the legacy .policy-* rules */
body .policy-page { padding-block: var(--space-xl) var(--space-3xl); min-height: auto; }
body .policy-content { max-width: 720px; margin-inline: auto; }
body .policy-content h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
body .policy-content h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
body .policy-content h3 { font-family: var(--font-display); font-weight: 600; }
body .policy-content p, body .policy-content li { text-wrap: pretty; }
body .deletion-callout { border-left-width: 1px; border-radius: var(--radius-card); background: var(--accent-soft); }

/* Header — static, simple */
.legal-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.legal-header .inner {
  max-width: var(--container); margin: 0 auto;
  padding: 13px clamp(1.25rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.legal-back-top { font-size: var(--text-base); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.legal-back-top:hover { color: var(--accent-deep); }

/* Footer — navy bookend, consistent with the home page */
.legal-footer { background: var(--navy); color: var(--on-navy); padding: var(--space-2xl) 0; }
.legal-footer .inner {
  max-width: var(--container); margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
}
.legal-footer .wordmark { color: var(--on-navy); }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-right: auto; }
.legal-footer nav a { color: var(--on-navy-2); font-size: var(--text-base); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.legal-footer nav a:hover { color: var(--on-navy); }
.legal-footer .copy { width: 100%; font-size: var(--text-sm); color: var(--on-navy-3); }
.legal-footer .copy a { color: var(--on-navy-2); }