/* Cookpath legal pages. Tokens copied from app/src/theme.ts so the web pages read like the app. */
:root {
  --ground: #F5EFE6;
  --white: #FFFFFF;
  --ink: #1C1613;
  --ink80: rgba(28, 22, 19, 0.8);
  --grey: #6E6863;
  --ember-text: #B84A0C;
  --pill-line: #E6DDD4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 42rem; margin: 0 auto; }

.back { margin: 0 0 20px; font-size: 14px; }
.back a { color: var(--ember-text); text-decoration: none; font-weight: 600; }
.back a:hover, .back a:focus-visible { text-decoration: underline; }

h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }

.updated { margin: 6px 0 0; color: var(--grey); font-size: 13px; }

.lead { margin: 16px 0 0; color: var(--ink80); }

section {
  margin-top: 14px;
  padding: 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px rgba(28, 22, 19, 0.16);
}

h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }

p { margin: 0; color: var(--ink80); }
p + p { margin-top: 8px; }

ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink80); }
li + li { margin-top: 4px; }

/* Placeholders still to fill before the store listing goes in. */
.todo {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(242, 107, 29, 0.08);
  box-shadow: inset 0 0 0 1px rgba(242, 107, 29, 0.18);
  color: var(--ember-text);
  font-weight: 600;
  white-space: nowrap;
}

nav.docs { margin-top: 14px; display: grid; gap: 10px; }
nav.docs a {
  display: block;
  padding: 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px rgba(28, 22, 19, 0.16);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
nav.docs a span { display: block; margin-top: 2px; color: var(--grey); font-weight: 400; font-size: 14px; }
nav.docs a:hover, nav.docs a:focus-visible { box-shadow: 0 6px 16px -8px rgba(28, 22, 19, 0.28), inset 0 0 0 1px var(--pill-line); }

footer { margin-top: 28px; color: var(--grey); font-size: 13px; text-align: center; }