:root {
  /* Brand and semantic colour tokens. */
  --my-conf-primary: var(--color-site-primary-color, #004761);
  --my-conf-secondary: var(--color-site-secondary-color, #33adb8);
  --my-conf-shading-1: var(--color-site-shading-color-1, #f7f7f7);
  --my-conf-shading-2: var(--color-site-shading-color-2, #e3e3e3);
  --my-conf-opening: var(--color-site-opening-color, #2e8b57);
  --my-conf-closing: var(--color-site-closing-color, #e00000);
  --my-conf-accent: var(--my-conf-primary);
  --my-conf-accent-soft: var(
    --color-site-primary-color-alpha,
    rgba(34, 113, 177, 0.12)
  );
  --my-conf-accent-contrast: #fff;
  --my-conf-accent-2: var(--my-conf-secondary);
  --my-conf-third: var(--color-site-third-color, #fff);
  --my-conf-highlight-1: var(--color-site-highlight-color-1, #5dc78c);
  --my-conf-highlight-2: var(--color-site-highlight-color-2, #d100a0);
  --my-conf-bg: var(--my-conf-shading-1);
  --my-conf-surface: #fff;
  --my-conf-surface-2: var(--my-conf-shading-1);
  --my-conf-surface-3: var(--my-conf-shading-2);
  --my-conf-border: #c3c4c7;
  --my-conf-border-soft: #dcdcde;
  --my-conf-text: #1d2327;
  --my-conf-text-soft: #50575e;
  --my-conf-text-faint: #787c82;
  --my-conf-success: var(--my-conf-opening);
  --my-conf-success-soft: #edfaef;
  --my-conf-warning: #dba617;
  --my-conf-warning-soft: #fcf9e8;
  --my-conf-danger: var(--my-conf-closing);
  --my-conf-danger-soft: #fcf0f1;
  --my-conf-info: #72aee6;
  --my-conf-info-soft: #f0f6fc;

  /* Spacing and elevation tokens. */
  --my-conf-space-1: 4px;
  --my-conf-space-2: 8px;
  --my-conf-space-3: 12px;
  --my-conf-space-4: 16px;
  --my-conf-space-5: 24px;
  --my-conf-space-6: 32px;
  --my-conf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --my-conf-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.1);
  --my-conf-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* Typography is scoped by application surface. Existing fallbacks are
   * preserved byte-for-byte so introducing ownership does not change metrics. */
  --my-conf-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --my-conf-font-admin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --my-conf-font-public: var(--font-family, Roboto, sans-serif);
  --my-conf-font-email: Arial, Helvetica, sans-serif;
  --my-conf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --my-conf-font-icons: dashicons;
  --my-conf-font-size-xs: 11px;
  --my-conf-font-size-s: 12px;
  --my-conf-font-size-m: 13px;
  --my-conf-font-size-l: 15px;
  --my-conf-font-family: var(--font-family, Roboto, sans-serif);
  --my-conf-font-weight: var(--font-weight, 300);
  --my-conf-line-height: var(--line-height, 1.7);
  --my-conf-heading-font-family: var(
    --h1-font-family,
    "Trebuchet MS",
    Helvetica,
    sans-serif
  );

  /* Motion and shared control geometry. */
  --my-conf-ease: cubic-bezier(0.2, 0, 0, 1);
  --my-conf-duration: 160ms;
  --my-conf-checkbox-size: 19px;
  --my-conf-control-height: 44px;
  --my-conf-control-padding-inline: 11px;

  /* Shared administration component tokens. */
  --my-conf-ui-accent: #168c99;
  --my-conf-ui-accent-dark: #0d6771;
  --my-conf-ui-ink: #17212b;
  --my-conf-ui-muted: #5f6b76;
  --my-conf-ui-canvas: #f4f6f8;
  --my-conf-ui-surface: #fff;
  --my-conf-ui-surface-soft: #f6f8fa;
  --my-conf-ui-surface-muted: #edf2f5;
  --my-conf-ui-border: #d7dde3;
  --my-conf-ui-border-strong: #aeb8c2;
  --my-conf-ui-danger: #b32d2e;
  --my-conf-ui-focus: 0 0 0 1px var(--my-conf-ui-accent);
  --my-conf-ui-control-height: var(--my-conf-control-height);
  --my-conf-ui-control-height-small: 30px;
  --my-conf-ui-button-line-height: 1.2;
  --my-conf-control-height-large: var(--my-conf-control-height);
  --my-conf-ui-gap: 10px;
  --my-conf-table-border: #d8dee4;
  --my-conf-table-head: #edf2f5;
  --my-conf-table-hover: #f7fafb;
  --my-conf-ui-space-1: 4px;
  --my-conf-ui-space-2: 8px;
  --my-conf-ui-space-3: 12px;
  --my-conf-ui-space-4: 16px;
  --my-conf-ui-space-5: 20px;
  --my-conf-ui-table-head: #edf2f5;
  --my-conf-ui-table-hover: #f7fafb;

  /* Shared dialog and rich-editor tokens. */
  --my-conf-dialog-backdrop: rgb(20 31 40 / 68%);
  --my-conf-dialog-backdrop-filter: blur(2px);
  --my-conf-dialog-surface: #fff;
  --my-conf-dialog-body: #f6f8f9;
  --my-conf-dialog-border: var(--my-conf-border-strong, #8c8f94);
  --my-conf-dialog-divider: var(--my-conf-border);
  --my-conf-dialog-shadow: 0 18px 55px rgb(18 34 45 / 28%);
  --my-conf-dialog-width: 760px;
  --my-conf-dialog-max-height: calc(100dvh - 24px);
  --my-conf-dialog-header-padding: 13px 16px;
  --my-conf-dialog-body-padding: 16px;
  --my-conf-dialog-footer-padding: 12px 16px;
  --my-conf-switch-active: #168c9a;
  --my-conf-switch-active-dark: #0d6771;
  --my-conf-editor-pane-min-height: 210px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-my-conf-theme="auto"],
  body[data-my-conf-theme="auto"] {
    --my-conf-bg: #1d2327;
    --my-conf-surface: #23282d;
    --my-conf-surface-2: #2c3338;
    --my-conf-surface-3: #32373c;
    --my-conf-border: #3c434a;
    --my-conf-border-soft: #32373c;
    --my-conf-text: #e2e4e7;
    --my-conf-text-soft: #b5bcc2;
    --my-conf-text-faint: #8c8f94;
    --my-conf-accent-soft: rgba(114, 174, 230, 0.16);
    --my-conf-success-soft: rgba(0, 163, 42, 0.15);
    --my-conf-warning-soft: rgba(219, 166, 23, 0.15);
    --my-conf-danger-soft: rgba(214, 54, 56, 0.15);
    --my-conf-info-soft: rgba(114, 174, 230, 0.12);
    color-scheme: dark;
  }
}

:root[data-my-conf-theme="dark"],
body[data-my-conf-theme="dark"] {
  --my-conf-bg: #1d2327;
  --my-conf-surface: #23282d;
  --my-conf-surface-2: #2c3338;
  --my-conf-surface-3: #32373c;
  --my-conf-border: #3c434a;
  --my-conf-border-soft: #32373c;
  --my-conf-text: #e2e4e7;
  --my-conf-text-soft: #b5bcc2;
  --my-conf-text-faint: #8c8f94;
  --my-conf-accent-soft: rgba(114, 174, 230, 0.16);
  --my-conf-success-soft: rgba(0, 163, 42, 0.15);
  --my-conf-warning-soft: rgba(219, 166, 23, 0.15);
  --my-conf-danger-soft: rgba(214, 54, 56, 0.15);
  --my-conf-info-soft: rgba(114, 174, 230, 0.12);
  color-scheme: dark;
}