@import url('./theme.css');

:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, sans-serif;
  --space-none: 0;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 28px;
  --space-page: 32px;
  --space-note: 10px;
  --space-control: 13px;
  --space-notice: 14px;
  --radius-control: 8px;
  --radius-panel: 14px;
  --border-thin: 1px;
  --panel-shadow: 0 4px 18px #00000014;
  --legal-width: min(780px, 94vw);
  --recovery-width: min(420px, 92vw);
  --page-height: 100vh;
  --control-width: 100%;
  --status-height: 2em;
  --title-size: 20px;
  --control-size: 14px;
  --weight-medium: 600;
  --weight-strong: 700;
  --legal-leading: 1.55;
  --recovery-leading: 1.45;
  --pending-opacity: .6;
}

body { margin: var(--space-none); background: var(--color-canvas); color: var(--color-text); }
main { box-sizing: border-box; width: var(--legal-width); margin: var(--space-page) auto; padding: var(--space-xxl); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--panel-shadow); }
h1 { margin-top: var(--space-none); }
h2 { margin-top: var(--space-xxl); }
p, li { line-height: var(--legal-leading); }
a { color: var(--color-action); }
.updated { color: var(--color-muted); }
.notice { padding: var(--space-notice); border-left: var(--space-xs) solid var(--color-action); background: var(--color-subtle); }

button { cursor: pointer; background: var(--color-action); color: var(--color-action-text); border: none; border-radius: var(--radius-control); }
:focus-visible { outline-color: var(--color-focus); }

.recovery { min-height: var(--page-height); display: flex; align-items: center; justify-content: center; }
.recovery main { box-sizing: content-box; width: var(--recovery-width); margin: var(--space-none); padding: var(--space-xl); }
.recovery h1 { font-size: var(--title-size); }
.recovery p { margin: var(--space-note) var(--space-none); line-height: var(--recovery-leading); }
.recovery button { margin-top: var(--space-notice); padding: var(--space-md) var(--space-lg); font-size: var(--control-size); font-weight: var(--weight-medium); }