/* Shared styles for the public legal pages (terms, privacy), deployed from
   apps/legal/ to their own Cloudflare Pages project.

   Colours, radii and heading weights are copied from the admin dashboard
   tokens in packages/core/theme.ts so these pages read as part of the same
   product. Copied rather than imported on purpose — this folder has no build
   step and no dependency on the workspace, which is what guarantees the
   documents always render. If the brand colours change, update them here too.

   Two deliberate departures from DESIGN.md, which describes app screens rather
   than long-form documents:
   - Body text is 16px, not the 14px app body size. These are pages of prose
     read on a desktop browser, and 14px is tiring at that length.
   - The type family is the system stack rather than Inter. The apps bundle
     Inter locally, but a static page would have to fetch it from a font CDN —
     an external request on a privacy policy, which is a bad look and an extra
     dependency for a page that must always render.

   No dark theme: the admin dashboard is light-only, so these follow it. */

:root {
  --canvas: #faf7f5; /* canvas.primary — admin page background */
  --card: #ffffff; /* canvas.card */
  --text: #000000; /* text.primary */
  --text-secondary: #666666; /* text.secondary */
  --text-muted: #999999; /* text.muted */
  --accent: #e31b23; /* accent.DEFAULT */
  --accent-dark: #b91419; /* accent.dark */
  --accent-surface: #fdece9; /* accent.surface */
  --border: #e5e5e5; /* border */
}

/* Light only, deliberately. The admin dashboard has no dark theme, so honouring
   the reader's OS dark setting here would make these pages look like a
   different product. */
:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--canvas);
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

/* White card on the primary background, radius-xl — the admin page container */
.page {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px 56px;
}

@media (max-width: 600px) {
  body {
    padding: 0;
  }
  .page {
    border: none;
    border-radius: 0;
    padding: 32px 20px 48px;
  }
}

/* Section label: 11px bold uppercase, letter-spacing 0.8px */
.brand {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

/* H1 — 32px bold */
h1 {
  color: var(--text);
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* H2 — 24px bold */
h2 {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  margin: 44px 0 14px;
}

/* H3 — 18px semibold */
h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin: 28px 0 10px;
}

/* Caption — 12px */
.meta {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 12px;
}

.lang {
  font-size: 14px;
  margin: 0 0 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

p,
li {
  margin: 0 0 14px;
}

ul,
ol {
  padding-left: 22px;
  margin: 0 0 16px;
}

li {
  margin-bottom: 8px;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-dark);
}

strong {
  color: var(--text);
  font-weight: 600;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: 8px; /* radius-md */
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-size: 15px;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

/* Column header styling matches the admin data tables */
th {
  color: var(--text);
  background: var(--canvas);
  font-weight: 600;
  font-size: 14px;
}

/* Marks a value that must be filled in before these pages go live.
   Deliberately loud — an unreplaced placeholder should be obvious to
   anyone who opens the page, not something that ships unnoticed. */
.todo {
  background: var(--accent-surface);
  color: var(--accent-dark);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px; /* radius-sm */
  white-space: nowrap;
}

footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
}