/* Shared application palette. Case artwork lives in the separate theme contract. */
:root,
[data-site-theme] {
  --site-color-scheme: dark;

  /* Page surfaces, from recessed fields to raised controls. */
  --site-page-rgb: 16 17 20;
  --site-page: rgb(var(--site-page-rgb));
  --site-inset: #111216;
  --site-panel: #191b23;
  --site-panel-header: #232631;
  --site-control: #292a31;
  --site-hover: #34363e;

  /* Borders: retain separate subtle, control and hover emphasis. */
  --site-border-subtle: #30323a;
  --site-border: #383b48;
  --site-border-control: #4d4f58;
  --site-border-strong: #555861;
  --site-border-hover: #858893;

  /* Light and shadow channels also supply translucent effects. */
  --site-white-rgb: 255 255 255;
  --site-white: rgb(var(--site-white-rgb));
  --site-black-rgb: 0 0 0;
  --site-black: rgb(var(--site-black-rgb));

  /* Text roles; action text stays independent of page text. */
  --site-on-primary: var(--site-on-action);
  --site-on-action: var(--site-white);
  --site-on-brand: var(--site-white);
  --site-focus: var(--site-white);
  --site-text: #f4f4f5;
  --site-text-secondary: #dfe1e6;
  --site-text-muted: #b7bac8;
  --site-text-dim: #92959f;
  --site-text-disabled: #858893;

  /* Teal accent and primary actions. */
  --site-accent-rgb: 138 216 205;
  --site-accent: rgb(var(--site-accent-rgb));
  --site-accent-hover: #a6e8dd;
  --site-accent-surface: #203b37;
  --site-accent-border: #46776f;
  --site-accent-muted: #a8cec8;
  --site-action-primary: #00796b;
  --site-action-primary-hover: #00695c;
  --site-action-primary-bright: var(--site-action-primary);

  /* Secondary accents and selected states. */
  --site-purple: #d2a7ff;
  --site-purple-bright: #cbb4ff;
  --site-purple-text: #e4d8ff;
  --site-purple-surface: #26212f;
  --site-purple-raised: #30293d;
  --site-purple-border: #9264c0;
  --site-purple-strong: #7352a3;
  --site-purple-action: #7939ce;
  --site-purple-action-hover: #6928ba;
  --site-purple-focus: #ad77ef;

  /* Destructive actions and error messages. */
  --site-danger: #ff8091;
  --site-danger-border: var(--site-danger);
  --site-danger-surface: #501b2a;
  --site-danger-muted-border: var(--site-danger-border);
  --site-action-danger: #bc2342;
  --site-action-danger-hover: #a51d37;

  /* Positive actions. */
  --site-success-surface: #0d4436;
  --site-success: #67e5b2;
  --site-action-success: #16753e;
  --site-action-success-hover: #0d6331;
  --site-success-border: var(--site-success);

  /* Save and in-progress actions, distinct from positive/finished states. */
  --site-action-progress: #245fd1;
  --site-action-progress-hover: #1e50b4;
  --site-progress-border: #76b5ff;

  /* Warnings and informational notices. */
  --site-warning-rgb: 255 211 77;
  --site-warning: rgb(var(--site-warning-rgb));
  --site-warning-text: #f5dfa0;
  --site-warning-surface: #302719;
  --site-warning-border: var(--site-warning);
  --site-info: #89caff;
  --site-info-text: #e8f5ff;
  --site-info-surface: #173f75;
  --site-info-border: var(--site-info);

  /* Intentional multicolor landing-page artwork. */
  --site-promo-glow-rgb: 54 32 79;
  --site-promo-glow: rgb(var(--site-promo-glow-rgb));
  --site-promo-purple-start: #30204c;
  --site-promo-purple-end: #1c182e;
  --site-promo-purple-border: #58416e;
  --site-promo-blue-accent: #90dcf2;
  --site-promo-blue-start: #173c50;
  --site-promo-blue-end: #152431;
  --site-promo-blue-border: #345e73;
  --site-promo-pink-accent: #f4b1d3;
  --site-promo-pink-start: #43243e;
  --site-promo-pink-end: #281b2d;
  --site-promo-pink-border: #704562;

  /* Twitch branding is independent of the application accent. */
  --site-twitch: #9146ff;
  --site-twitch-hover: #7f35e7;
  --site-twitch-border: #a970ff;
  --site-twitch-surface: #351c65;
  --site-twitch-dark: #6441a5;

  /* Notification identities are shared by icons, filters and unread dots. */
  --site-notification-moderation-color: var(--site-danger);
  --site-notification-moderation-tint: var(--site-danger-surface);
  --site-notification-awarded-color: var(--site-success);
  --site-notification-awarded-tint: var(--site-success-surface);
  --site-notification-earned-color: var(--site-purple);
  --site-notification-earned-tint: var(--site-purple-surface);
  --site-notification-site-color: var(--site-info);
  --site-notification-site-tint: var(--site-info-surface);
  --site-notification-shelf-color: var(--site-warning);
  --site-notification-shelf-tint: var(--site-warning-surface);
}

:root,
[data-site-theme] {
  --site-page: rgb(var(--site-page-rgb));
  --site-accent: rgb(var(--site-accent-rgb));
  --site-warning: rgb(var(--site-warning-rgb));
  --site-promo-glow: rgb(var(--site-promo-glow-rgb));
}