/* doteo.ai public pages — San Juan on Paper
   Tokens mirrored from mobile/lib/app/config/theme/app_colors.dart (2026-09-20).
   If the app palette changes, change this file to match. */
/* Self-hosted so a visit sends nothing to Google (OPS-08, review 2026-10-14).
   Variable font (wght 400-900), SIL OFL 1.1: see fonts/OFL.txt. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-VF.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #F5F3ED;
  --card: #FFFFFF;
  --hairline: #E3DFD5;
  --ink-900: #0D1B28;
  --ink-700: #334455;
  --ink-500: #606D7B; /* text floor — no text lighter than this */
  --teal: #304B6A;      /* San Juan, the prime colour */
  --teal-dark: #273D57;
  --teal-wash: #EAEEF3;
  /* One type family, Schibsted Grotesk: no serif or monospace face
     (CLAUDE.md, Brand rules; review 2026-09-27, SRV-09). */
  --font-body: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- header / footer ---------- */
.site-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo img { display: block; }
/* Nav links: underlined like every other link (not colour alone), padded to a
   ~44px tap target, and a visible keyboard focus ring — UX-30, 2026-09-02. */
.site-nav a {
  display: inline-block;
  padding: 12px 8px;
  margin-left: 12px;
  color: var(--teal);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-nav a:hover { color: var(--teal-dark); }

.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink-500);
}
.site-footer p { margin: 4px 0; }
.site-footer a { color: var(--teal); }
/* Footer links are set apart by space, never a middle-dot separator. */
.site-footer p a + a { margin-left: 12px; }

/* ---------- document card ---------- */
.doc { max-width: 760px; margin: 8px auto 32px; padding: 0 20px; }
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 26, 25, 0.06);
  padding: 40px;
}

h1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.lede { font-size: 17px; color: var(--ink-700); margin: 0 0 24px; }

.meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 20px;
  margin: 0 0 8px;
}
.meta span { display: inline-block; margin-right: 18px; }

.toc {
  font-size: 15px;
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0 20px;
  margin-bottom: 8px;
}
.toc ol { margin: 8px 0 0; padding-left: 0; list-style: none; } /* numbers live in the link text */
.toc li { margin: 3px 0; }

h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink-900);
  margin: 36px 0 10px;
  scroll-margin-top: 20px;
}
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-900);
  margin: 24px 0 6px;
}
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin: 5px 0; }
strong { color: var(--ink-900); font-weight: 600; }

a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.table-wrap { overflow-x: auto; margin: 16px 0 22px; }
.table-wrap:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  font-weight: 600;
  color: var(--ink-900);
  text-align: left;
  background: var(--teal-wash);
  padding: 10px 12px;
  border: 1px solid var(--hairline);
}
td {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  vertical-align: top;
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .card { padding: 24px 20px; border-radius: 12px; }
  h1 { font-size: 28px; }
  table { font-size: 14px; }
}

/* Header stays on one line at 390px and narrower (T-33). */
.site-header { gap: 8px; }
.site-nav { white-space: nowrap; }
@media (max-width: 420px) {
  .site-header { padding: 16px; }
  .site-nav a { padding: 12px 6px; margin-left: 4px; font-size: 14px; }
}