/* Standalone stylesheet for privacy.html — kept separate from the SPA's own
   CSS bundle (base.css/layout.css/components.css/pages.css apply to app
   routes, not this static legal page), but reuses tokens.css for visual
   consistency. External file (not inline <style>) so the page can keep a
   strict CSP with no 'unsafe-inline'. */
body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

.legal-page {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-main) var(--space-xl);
}

.legal-nav {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-label-md);
}

.legal-nav a {
  color: var(--color-text-variant);
  text-decoration: underline;
}

h1 {
  color: var(--color-primary);
  font-size: var(--font-size-headline-lg-mobile);
}

h2 {
  color: var(--color-primary);
  font-size: var(--font-size-headline-md);
  margin-top: var(--space-xl);
}

h3 {
  font-size: var(--font-size-body-lg);
  margin-top: var(--space-lg);
}

p, li {
  color: var(--color-text-variant);
  font-size: var(--font-size-body-md);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

.lang-section[dir="rtl"] {
  text-align: right;
}

.draft-notice {
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--color-secondary-container);
  font-size: var(--font-size-body-md);
}