:root[data-color-scheme='light'] {
  --custom-selection-bg: rgba(202,156,249,1);
  --custom-selection-text: #fff;
  --custom-scrollbar-thumb: rgba(202,156,249,1);
  --custom-scrollbar-track: rgba(249,249,251,1);
  --custom-page-bg: rgba(222,224,212,1);
  --custom-panel-bg: rgba(249,249,251,1);
  --custom-modal-bg: rgba(232,233,225,1);
  --custom-border-bg: rgba(255,255,255,1);
  --custom-button-bg: rgba(178,50,63,1);
  --custom-button-text: #fff;

  --color-bg-primary: var(--custom-page-bg);
  --color-bg-secondary: var(--custom-panel-bg);
  --color-bg-tertiary: var(--custom-panel-bg);

  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);
}

:root[data-color-scheme='light'] ::selection {
  color: var(--custom-selection-text);
  background: var(--custom-selection-bg);
}

:root[data-color-scheme='light'],
:root[data-color-scheme='light'] body,
:root[data-color-scheme='light'] * {
  scrollbar-width: thin !important;
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track) !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar-track,
:root[data-color-scheme='light'] *::-webkit-scrollbar-corner {
  background: var(--custom-scrollbar-track) !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb) !important;
  border-radius: 999px !important;
}

:root[data-color-scheme='light'],
:root[data-color-scheme='light'] body,
:root[data-color-scheme='light'] .app-holder,
:root[data-color-scheme='light'] .ui,
:root[data-color-scheme='light'] .columns-area,
:root[data-color-scheme='light'] .layout,
:root[data-color-scheme='light'] .layout-single-column,
:root[data-color-scheme='light'] .tabs-bar__wrapper,
:root[data-color-scheme='light'] .tabs-bar,
:root[data-color-scheme='light'] .tabs-bar__link,
:root[data-color-scheme='light'] .navigation-bar {
  background-color: var(--custom-page-bg) !important;
}

:root[data-color-scheme='light'] body {
  --background-border-color: var(--custom-border-bg);
}

:root[data-color-scheme='light'] .indent {
  display: inline-block;
  padding-left: 20px;
}

:root[data-color-scheme='light'] .public-account-header__tabs__tabs__buttons .modal-button,
:root[data-color-scheme='light'] .public-account-header__tabs__tabs__buttons .logo-button,
:root[data-color-scheme='light'] .public-account-header__tabs__tabs__buttons .button,
:root[data-color-scheme='light'] .actions .btn,
:root[data-color-scheme='light'] .account-card__actions__button .modal-button,
:root[data-color-scheme='light'] .account__relationship .button,
:root[data-color-scheme='light'] .button--block,
:root[data-color-scheme='light'] .button-primary,
:root[data-color-scheme='light'] .nav-button {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
}

:root[data-color-scheme='light'] .button-tertiary {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
}

:root[data-color-scheme='light'] .nav-button {
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
}

:root[data-color-scheme='light'] .label_input__append {
  max-width: 160px !important;
}

/* Safety action modal: keep darker modal surface, without changing button styles */
:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal {
  --color-bg-primary: var(--custom-modal-bg);
  --color-bg-secondary: var(--custom-modal-bg);
  --color-bg-tertiary: var(--custom-modal-bg);

  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);
}

/* Apply the darker surface through Mastodon's own modal sections */
:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal > .safety-action-modal__top,
:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal > .safety-action-modal__bottom {
  background-color: var(--custom-modal-bg) !important;
}

/* Target outside the form: likely wrapper/backdrop edge causing the stray grey top line */
:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal) {
  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);

  border-top-color: var(--custom-border-bg) !important;
  outline-color: var(--custom-border-bg) !important;
}

/* If the wrapper draws the grey line as a pseudo-element */
:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal)::after {
  border-top-color: var(--custom-border-bg) !important;
  background-color: var(--custom-border-bg) !important;
  box-shadow: none !important;
}

/* Brave/Chromium edge fix: clipped top seam cover */
:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal::before {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 10 !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;

  background-color: var(--custom-border-bg) !important;
  border-radius: 16px 16px 0 0 !important;
}