src/components/auth/AuthPageShell.css

/* DocDoe auth — paper + ink, same family as Student OS */
.docdoe-auth {
  --auth-ink: #17181b;
  --auth-paper: #fcfcfa;
  --auth-panel: #ffffff;
  --auth-muted: #5c6170;
  --auth-line: #e5e5e1;
  --auth-accent: #17181b;
  --auth-accent-hover: #303136;
  --df-display: var(--font-docdoe-display), "Archivo", ui-sans-serif, system-ui, sans-serif;
  --df-font: var(--font-docdoe-sans), ui-sans-serif, system-ui, sans-serif;

  background: var(--auth-paper);
  color: #17181b;
  font-family: var(--df-font);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.docdoe-auth ::selection {
  background: rgba(23, 24, 27, 0.14);
  color: var(--auth-ink);
}

.docdoe-auth .auth-display {
  font-family: var(--df-display);
}

.docdoe-auth .auth-card {
  background: transparent;
  color: #17181b;
  color-scheme: light;
}

html:has(.docdoe-auth),
html:has(.docdoe-auth) body {
  background: #fcfcfa;
  color: #17181b;
}

.docdoe-auth a:focus-visible,
.docdoe-auth button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fcfcfa, 0 0 0 4px rgba(23, 24, 27, 0.28);
}

.docdoe-auth .auth-card a:focus-visible,
.docdoe-auth .auth-card button:focus-visible {
  box-shadow: 0 0 0 2px #fcfcfa, 0 0 0 4px rgba(23, 24, 27, 0.28);
}

/* The global form polish uses the dark workspace text token on label hover.
   Keep auth labels readable against this light card in every pointer state. */
.docdoe-auth .auth-card label:hover {
  color: inherit;
}

/* The global mobile tap-target rule applies to the whole checkbox input and
   makes the native control look like a broken 44px square. The label remains
   the comfortable tap target; keep the visual checkbox compact and consistent
   with the auth form. */
.docdoe-auth .auth-checkbox {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  accent-color: var(--auth-ink);
}