/*
  Standalone styles for the server-rendered legal / app-integration pages
  (/privacy, /terms, /connect, /disconnect).

  These pages are plain Razor views that do NOT load the Vite/React bundle, so
  this file is self-contained: it redeclares the brand CSS variables (kept in
  sync with ClientApp/src/index.css), light/dark theming, and typography. It
  deliberately avoids Tailwind utilities because Tailwind only emits classes it
  finds while scanning the React source, not these views.

  Source of truth lives here in ClientApp/public/css/. Vite copies it to
  wwwroot/css/legal.css on every build (wwwroot is a regenerated build dir).
*/

:root {
  --background: 0 0% 100%;
  --foreground: 220 20% 10%;
  --card: 0 0% 99%;
  --card-foreground: 220 20% 10%;
  --primary: 2 80% 63%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 10% 46%;
  --border: 220 13% 91%;
  --radius: 0.625rem;
}

.dark {
  --background: 222 25% 8%;
  --foreground: 210 20% 93%;
  --card: 222 22% 11%;
  --card-foreground: 210 20% 93%;
  --primary: 2 80% 63%;
  --primary-foreground: 0 0% 100%;
  --muted: 222 20% 16%;
  --muted-foreground: 215 15% 55%;
  --border: 222 18% 18%;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Header ---- */

.legal-header {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}

.legal-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.legal-header__logo img {
  height: 2rem;
  width: auto;
  display: block;
}

.legal-header__logo .logo--light {
  display: block;
}

.legal-header__logo .logo--dark {
  display: none;
}

.dark .legal-header__logo .logo--light {
  display: none;
}

.dark .legal-header__logo .logo--dark {
  display: block;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.25rem);
  background-color: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background-color: hsl(var(--muted));
}

.theme-toggle svg {
  height: 1.1rem;
  width: 1.1rem;
}

.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

.dark .theme-toggle .icon-sun {
  display: block;
}

.dark .theme-toggle .icon-moon {
  display: none;
}

/* ---- Main content ---- */

.legal-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.legal-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin: 0 0 0.75rem;
}

.legal-main h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.legal-updated {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0.625rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  margin-bottom: 2.5rem;
}

.legal-main h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}

.legal-main p {
  margin: 0 0 1.15rem;
}

.legal-main ul {
  margin: 0 0 1.15rem;
  padding-left: 1.25rem;
}

.legal-main li {
  margin-bottom: 0.6rem;
}

.legal-main li::marker {
  color: hsl(var(--primary));
}

.legal-main strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.legal-intro {
  font-size: 1.075rem;
  color: hsl(var(--muted-foreground));
}

/* ---- Footer ---- */

.legal-footer {
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}

.legal-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.legal-footer__links a {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.legal-footer__links a:hover {
  color: hsl(var(--foreground));
}

.legal-footer__copy {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 480px) {
  .legal-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}