/*
 * The legal pages' own stylesheet — the app's neobrutalism, ported by hand from
 * apps/app/src/design/tokens.ts like apps/admin/src/index.css is. It is not
 * shared with the console: these pages are static files that never go through
 * Vite, so they carry their own copy rather than importing the SPA's bundle.
 */

:root {
  --background: #f7f0d4;
  --foreground: #000000;
  --card: #ffffff;
  --muted-foreground: #6b6355;
  --primary: #ffdc59;
  --border-width: 2px;
  --radius: 12px;
  --font-head: 'Archivo Black', system-ui, sans-serif;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

main {
  max-width: 720px;
  margin: 0 auto;
}

header {
  margin-bottom: 32px;
}

.brand {
  display: inline-block;
  padding: 6px 12px;
  border: var(--border-width) solid var(--foreground);
  border-radius: 8px;
  background: var(--primary);
  box-shadow: 4px 4px 0 0 var(--foreground);
  font-family: var(--font-head);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--foreground);
}

h1 {
  margin: 24px 0 8px;
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1.2;
  text-transform: uppercase;
}

h2 {
  margin: 40px 0 8px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.3;
}

h3 {
  margin: 24px 0 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
}

.updated {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
}

section {
  padding: 20px 24px;
  border: var(--border-width) solid var(--foreground);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 4px 4px 0 0 var(--foreground);
}

section > h2:first-child {
  margin-top: 0;
}

dl {
  margin: 0;
}

ul,
ol {
  margin: 8px 0;
  padding-left: 20px;
}

/* The rule between a page's French text and its English restatement. */
hr {
  margin: 40px 0 0;
  border: 0;
  border-top: var(--border-width) solid var(--foreground);
}

li {
  margin: 4px 0;
}

code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--background);
  font-size: 14px;
}

dt {
  margin-top: 12px;
  font-weight: 700;
}

dd {
  margin: 0;
}

a {
  color: var(--foreground);
}

footer {
  margin-top: 32px;
  color: var(--muted-foreground);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 480px) {
  h1 {
    font-size: 26px;
  }

  section {
    padding: 16px;
  }
}