/* Shared dark theme.
 *
 * One palette for every dark surface in the product: the public homepage, the
 * site-user pages and the administrator panel. It is opt-in per page, so a
 * template only goes dark when it asks for it:
 *
 *   `.user-body--dark`  – /login, the user panel, the referral landing
 *   `.admin-body`       – the administrator panel and its sign-in page
 *
 * The MLM simulator pages deliberately stay on the light theme when they are
 * served to a site user, which is why the selectors are opt-in rather than
 * applied to `.user-body` as a whole.
 *
 * Nothing here restyles a component. tokens.css declares the palette, and
 * base.css, user.css, admin.css, table-browser.css, table-editor.css,
 * records.css and dummy-mlm.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);
}

/* ------------------------------------------------------------- Site user -- */

/* The wordmark and the brand-tinted chip would otherwise use the dark
   "text on yellow" colour on top of a translucent yellow. */
.user-body--dark .user-brand,
.user-body--dark .referral-card__icon {
  color: var(--color-brand);
}

/* ----------------------------------------------------------- Admin panel -- */

/* Two tree-canvas overlays in the simulator were written as literal light
   washes rather than as tokens. */
.admin-body .tree-placeholder {
  background-color: rgba(255, 255, 255, 0.04);
}

.admin-body .tree-state {
  background-color: rgba(11, 11, 14, 0.88);
}