/* Shared dark theme.
 *
 * One palette for every dark surface in the product. It is opt-in per page, so
 * a template only goes dark when it asks for it:
 *
 *   `.user-body--dark`  – public / site-user pages and the shared error page
 *   `.admin-body`       – the administrator panel and its sign-in page
 *
 * Nothing here restyles a component. tokens.css declares the palette, and
 * base.css, admin.css, table-browser.css, table-editor.css and records.css are
 * all written against those tokens, so redeclaring the tokens on the body
 * flips cards, fields, tables, alerts, dialogs and the panel chrome in one
 * place. The rules after the token block are only for the few places where a
 * token meaning "a pale tint" needs a readable foreground once the tint has
 * become translucent, or where a colour was written as a literal rather than
 * as a token.
 */

.user-body--dark,
.admin-body {
  color-scheme: dark;

  /* Surfaces: the canvas is the darkest layer, cards sit above it. */
  --color-background: #0b0b0e;
  --color-surface: #17171d;
  --color-surface-muted: #121217;
  --color-surface-inverse: #f7f7f8;

  /* Panel chrome: header and sidebar sit between the canvas and the cards. */
  --color-chrome: #121217;
  --color-chrome-raised: #1d1d25;
  --color-chrome-border: rgba(255, 255, 255, 0.12);
  --color-chrome-text: #f7f7f8;
  --color-chrome-text-muted: #aeadb8;

  /* Text */
  --color-text: #f7f7f8;
  --color-text-muted: #aeadb8;
  --color-text-subtle: #8d8c97;
  --color-text-inverse: #0a0a0b;

  /* Lines and focus */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-focus-ring: var(--color-brand);

  /* The brand tint becomes translucent so it reads on a dark surface. */
  --color-brand-soft: rgba(235, 196, 42, 0.14);

  /* Accents lightened until they carry their own weight on a dark surface. */
  --color-primary: #8fb4ff;
  --color-primary-hover: #a9c6ff;
  --color-primary-active: #c3d7ff;
  --color-primary-contrast: #0a0a0b;
  --color-primary-soft: rgba(143, 180, 255, 0.16);
  --color-accent: #5ee0a0;

  --color-success: #5ee0a0;
  --color-success-soft: rgba(94, 224, 160, 0.14);
  --color-warning: #f0a83c;
  --color-warning-soft: rgba(240, 168, 60, 0.14);
  --color-error: #ff8080;
  --color-error-hover: #ff9a9a;
  --color-error-contrast: #0a0a0b;
  --color-error-soft: rgba(255, 128, 128, 0.14);
  --color-info: #8fb4ff;
  --color-info-soft: rgba(143, 180, 255, 0.16);

  /* Shadows read as depth against a dark page only when they are this deep. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}

/* Chrome paints its own near-white box over an autofilled field, which would
   otherwise leave one light rectangle in the middle of a dark form. */
.user-body--dark .field__control:-webkit-autofill,
.user-body--dark .field__control:-webkit-autofill:hover,
.user-body--dark .field__control:-webkit-autofill:focus,
.admin-body .field__control:-webkit-autofill,
.admin-body .field__control:-webkit-autofill:hover,
.admin-body .field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-muted) inset;
  caret-color: var(--color-text);
}

.user-body--dark .skip-link,
.admin-body .skip-link {
  background-color: var(--color-brand);
  color: var(--color-brand-contrast);
  font-weight: var(--font-weight-bold);
}