/*
 * Spectrum for GitLab CE. Load as a same-origin stylesheet using:
 * https://docs.gitlab.com/administration/custom_html_header_tags/
 * Mode/token sources, reviewed 2026-11-06:
 * https://docs.gitlab.com/development/fe_guide/dark_mode/
 * https://design.gitlab.com/product-foundations/tailwind-utilities/
 * https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/tokens/build/css/tokens.dark.css
 * https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/super_sidebar.scss
 * GitLab owns Light/Dark/Auto, syntax highlighting, diff colors and status colors.
 * shortcut: upstream classes/tokens are not a theming API; recheck after every GitLab upgrade.
 */

html:root,
.gl-light-scope {
  --spectrum-canvas: #f6f5f8;
  --spectrum-surface: #fff;
  --spectrum-subtle: #f0edf5;
  --spectrum-raised: #f0edf5;
  --spectrum-overlap: #fff;
  --spectrum-text: #24202c;
  --spectrum-heading: #18171d;
  --spectrum-muted: #625c6e;
  --spectrum-border: #d8d2e0;
  --spectrum-border-subtle: #e5e1ea;
  --spectrum-control-border: #8d7f9b;
  --spectrum-accent: #6931ae;
  --spectrum-accent-hover: #5b2999;
  --spectrum-accent-active: #4e2384;
  --spectrum-on-accent: #fff;
  --spectrum-primary: #6931ae;
  --spectrum-primary-hover: #5b2999;
  --spectrum-primary-active: #4e2384;
  --spectrum-on-primary: #fff;
  --spectrum-focus: #6931ae;
  --spectrum-link: #6931ae;
  --spectrum-selected: #eee7f8;
  --spectrum-selected-hover: #e2d6f3;
  --spectrum-shadow: 0 2px 5px rgb(0 0 0 / 4%), 0 12px 30px rgb(0 0 0 / 7%);
  --spectrum-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 28px 64px rgb(0 0 0 / 14%);
  --spectrum-radius: 0.75rem;
}

html:root.gl-dark,
.gl-dark-scope {
  /* Shared with the directory's canvas, surfaces, text, border and accent. */
  --spectrum-canvas: #0f0f13;
  --spectrum-surface: #16161c;
  --spectrum-subtle: #1c1c23;
  --spectrum-raised: #1c1c23;
  --spectrum-overlap: #1c1c23;
  --spectrum-text: #ededf2;
  --spectrum-heading: #ededf2;
  --spectrum-muted: #b4b4c0;
  --spectrum-border: #26262f;
  --spectrum-border-subtle: #26262f;
  --spectrum-control-border: #817d8f;
  --spectrum-accent: #a78bfa;
  --spectrum-accent-hover: #c4b5fd;
  --spectrum-accent-active: #8b5cf6;
  --spectrum-on-accent: #0f0f13;
  --spectrum-primary: #ededf2;
  --spectrum-primary-hover: #fff;
  --spectrum-primary-active: #dcdce4;
  --spectrum-on-primary: #0f0f13;
  --spectrum-focus: #c4b5fd;
  --spectrum-link: #a78bfa;
  --spectrum-selected: #241b3a;
  --spectrum-selected-hover: #302642;
  --spectrum-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
  --spectrum-shadow-overlay: 0 8px 24px rgb(0 0 0 / 30%), 0 28px 64px rgb(0 0 0 / 38%);
  --spectrum-radius: 10px;
}

/* Semantic overrides reach native Pajamas controls, including portal-mounted UI. */
html:root:not(.gl-dark),
html:root.gl-dark,
.gl-light-scope,
.gl-dark-scope {
  --gl-application-chrome-background-color: var(--spectrum-canvas);
  --gl-background-color-default: var(--spectrum-surface);
  --gl-background-color-subtle: var(--spectrum-subtle);
  --gl-background-color-strong: var(--spectrum-raised);
  --gl-background-color-overlap: var(--spectrum-overlap);
  --gl-background-color-section: var(--spectrum-subtle);
  --gl-border-color-default: var(--spectrum-border);
  --gl-border-color-subtle: var(--spectrum-border-subtle);
  --gl-border-color-strong: var(--spectrum-control-border);
  --gl-text-color-default: var(--spectrum-text);
  --gl-text-color-subtle: var(--spectrum-muted);
  --gl-text-color-strong: var(--spectrum-heading);
  --gl-text-color-heading: var(--spectrum-heading);
  --gl-text-color-link: var(--spectrum-link);
  --gl-icon-color-default: var(--spectrum-text);
  --gl-icon-color-subtle: var(--spectrum-muted);
  --gl-focus-ring-outer-color: var(--spectrum-focus);
  --gl-control-background-color-default: var(--spectrum-surface);
  --gl-control-background-color-concatenation: var(--spectrum-subtle);
  --gl-control-background-color-readonly: var(--spectrum-subtle);
  --gl-control-border-color-default: var(--spectrum-control-border);
  --gl-control-border-color-hover: var(--spectrum-muted);
  --gl-control-border-color-focus: var(--spectrum-accent);
  --gl-control-background-color-selected-default: var(--spectrum-accent);
  --gl-control-background-color-selected-hover: var(--spectrum-accent-hover);
  --gl-control-background-color-selected-focus: var(--spectrum-accent-hover);
  --gl-control-border-color-selected-default: var(--spectrum-accent);
  --gl-control-border-color-selected-hover: var(--spectrum-accent-hover);
  --gl-control-border-color-selected-focus: var(--spectrum-accent-hover);
  --gl-control-indicator-color-selected: var(--spectrum-on-accent);
  --gl-action-neutral-foreground-color-default: var(--spectrum-text);
  --gl-action-neutral-background-color-hover: var(--spectrum-raised);
  --gl-action-neutral-background-color-active: var(--spectrum-selected);
  --gl-action-selected-foreground-color-default: var(--spectrum-text);
  --gl-action-selected-background-color-default: var(--spectrum-selected);
  --gl-action-selected-background-color-hover: var(--spectrum-selected-hover);
  --gl-action-selected-background-color-active: var(--spectrum-selected-hover);
  --gl-action-strong-confirm-background-color-default: var(--spectrum-primary);
  --gl-action-strong-confirm-background-color-hover: var(--spectrum-primary-hover);
  --gl-action-strong-confirm-background-color-active: var(--spectrum-primary-active);
  --gl-action-strong-confirm-foreground-color-default: var(--spectrum-on-primary);
  --gl-action-confirm-foreground-color-default: var(--spectrum-link);
  --gl-action-confirm-foreground-color-hover: var(--spectrum-link);
  --gl-action-confirm-foreground-color-active: var(--spectrum-link);
  --gl-action-confirm-background-color-hover: var(--spectrum-selected);
  --gl-action-confirm-background-color-active: var(--spectrum-selected-hover);
  --gl-button-default-primary-foreground-color-default: var(--spectrum-text);
  --gl-button-default-primary-background-color-default: var(--spectrum-subtle);
  --gl-button-default-primary-background-color-hover: var(--spectrum-raised);
  --gl-button-default-primary-background-color-active: var(--spectrum-selected);
  --gl-button-default-primary-border-color-default: var(--spectrum-control-border);
  --gl-button-default-primary-border-color-hover: var(--spectrum-muted);
  --gl-button-default-primary-border-color-active: var(--spectrum-accent);
  --gl-button-confirm-primary-foreground-color-default: var(--spectrum-on-primary);
  --gl-button-confirm-secondary-foreground-color-default: var(--spectrum-link);
  --gl-button-confirm-secondary-foreground-color-hover: var(--spectrum-link);
  --gl-button-confirm-secondary-foreground-color-active: var(--spectrum-link);
  --gl-button-confirm-secondary-background-color-default: var(--spectrum-selected);
  --gl-button-confirm-secondary-background-color-hover: var(--spectrum-selected-hover);
  --gl-button-confirm-secondary-background-color-active: var(--spectrum-selected-hover);
  --gl-button-confirm-secondary-border-color-default: var(--spectrum-accent);
  --gl-button-confirm-secondary-border-color-hover: var(--spectrum-accent);
  --gl-button-confirm-secondary-border-color-active: var(--spectrum-accent);
  --gl-tab-selected-indicator-color-default: var(--spectrum-accent);
  --gl-dropdown-background-color: var(--spectrum-overlap);
  --gl-dropdown-border-color: var(--spectrum-border);
  --gl-dropdown-divider-color: var(--spectrum-border-subtle);
  --gl-table-row-background-color-hover: var(--spectrum-subtle);
  --gl-datepicker-background-color: var(--spectrum-overlap);
  --gl-token-background-color: var(--spectrum-raised);
  --gl-token-foreground-color: var(--spectrum-text);
  --gl-filtered-search-token-type-background-color-default: var(--spectrum-subtle);
  --gl-filtered-search-token-type-background-color-hover: var(--spectrum-raised);
  --gl-filtered-search-token-data-background-color-default: var(--spectrum-raised);
  --gl-filtered-search-token-data-background-color-hover: var(--spectrum-selected);
  --gl-filtered-search-token-operator-background-color-default: var(--spectrum-subtle);
  --gl-filtered-search-token-operator-background-color-hover: var(--spectrum-raised);
}

/* Existing layout widths, scroll containers, breakpoints and stacking stay native. */
html body {
  background-color: var(--spectrum-canvas);
}

/* The native authentication artwork must not introduce a second page palette. */
html body.login-page {
  background: var(--spectrum-canvas);
}

html body.login-page::before {
  background-image: none !important;
}

html .super-topbar {
  background-color: var(--spectrum-canvas);
  box-shadow: 0 1px 0 var(--spectrum-border-subtle);
}

html .super-sidebar {
  background-color: var(--spectrum-canvas);
}

html .super-sidebar .super-sidebar-nav-item {
  border-radius: 0.625rem;
}

html .super-sidebar .super-sidebar-nav-item:is(.selected, [aria-current="page"]) {
  background-color: var(--spectrum-selected);
  color: var(--spectrum-text);
}

html .super-sidebar .super-sidebar-nav-item:is(.selected, [aria-current="page"]):hover {
  background-color: var(--spectrum-selected-hover);
}

html .super-sidebar .super-sidebar-nav-item:not(.selected, [aria-current="page"]):hover {
  background-color: var(--spectrum-raised);
}

html :is(.panel-content, .work-item-detail-panel-content) {
  background-color: var(--gl-background-color-default);
}

html :is(.gl-card, .card, .issuable-show, .wiki-page-header) {
  border-color: var(--gl-border-color-subtle);
  border-radius: var(--spectrum-radius);
}

html :is(.gl-card, .card) {
  background-color: var(--gl-background-color-default);
  box-shadow: var(--spectrum-shadow);
}

html :is(.gl-card-header, .card-header) {
  background-color: var(--gl-background-color-section);
  border-color: var(--gl-border-color-subtle);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

html :is(.gl-card-footer, .card-footer) {
  background-color: var(--gl-background-color-section);
  border-color: var(--gl-border-color-subtle);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

html :is(.page-title, .title-container .title, .issuable-title, .wiki-page-header h1) {
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

html :is(.detail-page-header, .page-content-header, .content-block, .issuable-row, .project-row, .group-row) {
  border-color: var(--gl-border-color-subtle);
}

html :is(.issuable-row, .project-row, .group-row):hover {
  background-color: var(--gl-background-color-subtle);
}

/* Forms retain native validation, disabled states and paired input-group corners. */
html :is(.gl-form-input, .gl-form-textarea, .gl-form-select) {
  border-radius: 0.5rem;
}

html .gl-button.gl-button:not(.btn-link) {
  border-radius: 0.5rem;
}

html .btn-group > .gl-button.gl-button {
  border-radius: 0;
}

html .btn-group > .gl-button.gl-button:first-child {
  border-start-start-radius: 0.5rem;
  border-end-start-radius: 0.5rem;
}

html .btn-group > .gl-button.gl-button:last-child {
  border-start-end-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
}

html .gl-button.btn-confirm:not(:disabled, .disabled, [aria-disabled="true"]) {
  background-image: none;
}

html :is(.gl-modal .modal-content, .gl-drawer, .gl-new-dropdown-panel, .dropdown-menu, .gl-popover) {
  background-color: var(--gl-background-color-overlap);
  border-color: var(--gl-border-color-default);
  box-shadow: var(--spectrum-shadow-overlay);
}

html :is(.gl-modal .modal-content, .gl-new-dropdown-panel, .dropdown-menu, .gl-popover) {
  border-radius: var(--spectrum-radius);
}

html :is(.gl-modal .modal-header, .gl-modal .modal-footer, .gl-drawer-header) {
  border-color: var(--gl-border-color-subtle);
}

html :is(.gl-new-dropdown-panel, .dropdown-menu) :is(.gl-new-dropdown-item, .dropdown-item) {
  border-radius: 0.375rem;
}

/* Data tables are distinct from repository, diff, terminal and editor surfaces. */
html .gl-table {
  color: var(--gl-text-color-default);
  background-color: var(--gl-background-color-default);
}

html .gl-table :is(th, td) {
  border-color: var(--gl-border-color-subtle);
}

html .gl-table thead th {
  background-color: var(--gl-background-color-section);
  color: var(--gl-text-color-subtle);
  font-weight: 600;
}

html :is(.discussion, .note-form, .merge-request-widget) {
  border-color: var(--gl-border-color-subtle);
  border-radius: var(--spectrum-radius);
}

html :is(.discussion-header, .note-header, .file-title, .diff-file-header, .commit-box) {
  background-color: var(--gl-background-color-subtle);
  border-color: var(--gl-border-color-subtle);
}

html .file-holder {
  border-color: var(--gl-border-color-default);
  border-radius: 0.625rem;
}

html .md :is(blockquote, hr) {
  border-color: var(--gl-border-color-default);
}

html .md a:not(.gl-button) {
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.15em;
}

/* Add an outline without replacing native validation/focus box shadows. */
html :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gl-focus-ring-outer-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html .super-sidebar .super-sidebar-nav-item {
    transition: background-color 120ms ease, color 120ms ease;
  }
}

@media (prefers-contrast: more) {
  html :is(.gl-card, .card, .gl-modal .modal-content, .file-holder) {
    border-color: var(--gl-border-color-strong);
  }
}

@media (forced-colors: active) {
  html :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}