/* Tokens are the contract in DESIGN.md. Every colour below was contrast-
   checked, not eyeballed: the accent clears 4.5:1 on BOTH the page ground
   and the card surface, and the button label is dark ON the accent rather
   than white, which failed at 4.12:1. */
:root {
  --bg: #0d0f18;
  --surface: #141720;
  --border: #1e2535;
  --text: #e8ecf4;
  --muted: #a0aec0;
  --footer-ink: #98a2b3;
  /* Site Studio's accent. Hosting, Site Studio, Service Center and this app
     are four products a customer moves between from one Backoffice section,
     and they had four different schemes.

     --accent-ink deliberately stays #0d0f18 rather than taking Site Studio's
     #062a26 with it: it is this app's OWN ground colour, so the button label
     is the page reading back through it, and it measures BETTER on the new
     accent -- 10.27:1 against 8.25:1. Matching a token for its own sake at a
     cost in contrast is the wrong trade.

     Link text improves too: `a` is --accent, which goes from 6.44:1 to
     10.27:1 on the ground. */
  --accent: #2dd4bf;
  --accent-ink: #0d0f18;
  --danger: #e26d6d;
  --radius-card: 12px;
  --radius-inner: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* The body IS the app shell: dvh, a flex column, and .shell{flex:1}
     keep the brand footer on screen. dvh rather than vh so a mobile
     URL bar does not push the footer out of view. No page INSIDE the
     shell may use 100vh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;          /* body floor is 16px; 17 is the intended default */
  line-height: 1.6;
}
.shell { flex: 1; width: min(760px, 100% - 2.5rem); margin: 0 auto; padding: 2.5rem 0; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.lead { font-size: 1.25rem; color: var(--muted); margin: 0 0 2rem; max-width: 62ch; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 1.5rem; margin-bottom: 1.5rem;
}
/* Borders, not shadows: on a dark ground a shadow reads as smudge. */
.card-highlight { border-color: var(--accent); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; }
/* anywhere, NOT break-word: a 43-character key must break mid-token rather
   than force the card to scroll sideways. */
.selectable { user-select: all; overflow-wrap: anywhere; }
.key-full {
  font-size: 1.05rem; padding: 0.75rem; background: var(--bg);
  border-radius: var(--radius-inner);   /* inner radius < outer, never equal */
}
.snippet {
  background: var(--bg); border-radius: var(--radius-inner); padding: 1rem;
  font-size: 0.95rem; line-height: 1.5; overflow-x: auto;
}
.keys { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.keys li {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border);
}
.meta { color: var(--muted); font-size: 0.875rem; }   /* 14px fine-print floor */
/* Muted, but BODY size. For prose that is quiet in the hierarchy and
   still meant to be read -- .meta is the 14px floor for timestamps and
   legal text, and a secondary call to action is neither. */
.quiet { color: var(--muted); }
/* Shared by the <button> that mints a key and the <a> that sends a
   signed-out visitor to Backoffice: one primary action, one appearance.
   Class-only selector so both elements match without a specificity fight. */
.primary {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); border: 0;
  border-radius: var(--radius-inner); padding: 0.7rem 1.2rem;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background-color 150ms ease-out;
}
.primary:hover { background: #57b0ff; }
button.link-danger {
  background: none; border: 0; color: var(--danger);
  font-size: 0.9375rem; cursor: pointer; padding: 0;
  transition: color 150ms ease-out;
}
button.copy {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-inner); padding: 0.45rem 0.9rem;
  font-size: 0.9375rem; cursor: pointer; margin-top: 0.75rem;
  transition: border-color 150ms ease-out;
}
button.copy:hover { border-color: var(--accent); }
a { color: var(--accent); }
/* One visible focus treatment for every interactive element. Never removed. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.brand-footer {
  text-align: center; padding: 1.25rem 1rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  font-size: 0.875rem;
}
/* A solid colour, not opacity: an opacity-muted colour composites against
   whatever is behind it and stops being predictable. */
.brand-footer a { color: var(--footer-ink); text-decoration: none; }
.brand-footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}