/* The console's style standard: every colour, size and radius here is a variable from tokens.css,
   the shared copy served beside this file (loaded first). tokens.css is a whole copy of cloudflare-os
   packages/workshop-shared/src/style/tokens.css; test/style-tokens.test.mjs checks its fingerprint.
   The page is light only: tokens.css keeps its dark values under a data-theme attribute, which this
   script-light page does not set. */
:root {
  color-scheme: light;
  font-family: var(--font-sans);
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
}
main { max-width: 26rem; margin: calc(var(--spacing) * 16) auto; padding: 0 calc(var(--spacing) * 4); font-size: var(--text-base); line-height: var(--leading-normal); }
.brand { font-weight: 700; letter-spacing: var(--tracking-caps-4); color: var(--text-color-kumo-brand); }
h1 { font-size: var(--text-22); line-height: var(--leading-7); letter-spacing: var(--tracking-tight-30); color: var(--text-color-kumo-strong); }
a { color: var(--text-color-kumo-link); }
label { display: block; margin-top: calc(var(--spacing) * 4); }
input {
  width: 100%; padding: calc(var(--spacing) * 2.5); font: inherit; font-size: var(--text-lg); box-sizing: border-box;
  background: var(--color-kumo-control); color: var(--text-color-kumo-default);
  border: 1px solid var(--color-kumo-interact); border-radius: var(--radius-md);
}
input:focus-visible, button:focus-visible, a.button:focus-visible { outline: 2px solid var(--color-kumo-ring); outline-offset: 2px; }
button, a.button {
  display: inline-block; margin-top: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
  font: inherit; font-size: var(--text-base); cursor: pointer; text-decoration: none;
  background: var(--color-kumo-brand); color: var(--text-color-kumo-inverse);
  border: 1px solid transparent; border-radius: var(--radius-md);
}
button:hover, a.button:hover { background: var(--color-kumo-brand-hover); }
form.inline button { margin-top: 0; padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3); font-size: var(--text-sm); background: var(--color-kumo-fill); color: var(--text-color-kumo-default); }
form.inline button:hover { background: var(--color-kumo-fill-hover); }
.small { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--text-color-kumo-subtle); }
form.inline { display: inline; }
p.agree { display: flex; gap: calc(var(--spacing) * 2.5); align-items: flex-start; margin-top: calc(var(--spacing) * 6); }
p.agree input { width: auto; flex: none; margin-top: calc(var(--spacing) * 1); accent-color: var(--color-kumo-brand); }
p.agree label { display: inline; margin-top: 0; }
.notice { padding: calc(var(--spacing) * 3); border-radius: var(--radius-md); background: var(--color-kumo-danger-tint); color: var(--text-color-kumo-danger); }