/*
 * Studio UI — additive interface theme for Penpot 2.18.5.
 * SPDX-License-Identifier: MPL-2.0
 * Load AFTER Penpot's native stylesheets.
 *
 * Selectors below are the deterministic namespace__class names emitted by
 * frontend/src/app/main/style.clj. They are source-based, not generated hashes.
 * Only application chrome is styled; no SVG/text/canvas object selectors.
 */

/* Native theme names: .light = light; .default = dark. */
.light {
  color-scheme: light;
  --studio-ui-font: "Inter", "Segoe UI", "Arial", sans-serif;
  --studio-panel: #ffffff;
  --studio-page: #f6f6f7;
  --studio-hover: #f0f0f2;
  --studio-border: #e4e4e7;
  --studio-selection: #e5f0ff;
  --studio-selected-text: #095cb5;
  --studio-muted: #64646f;
  --studio-focus: #1678e8;
  --studio-raised-shadow: 0 6px 24px #172b4d14, 0 1px 4px #172b4d0a;
  --studio-card-shadow: 0 1px 3px #172b4d08;
  --studio-dialog-shadow: 0 20px 80px #171b2b26, 0 4px 16px #171b2b14;
  --color-background-default: #ffffff;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f0f0f2;
  --color-background-tertiary: #f5f5f6;
  --color-background-quaternary: #e9e9ec;
  --color-background-disabled: #eeeef0;
  --color-foreground-primary: #202024;
  --color-foreground-secondary: #64646f;
  --color-foreground-disabled: #92929d;
  --color-icon-default: #64646f;
  --color-accent-primary: #0969cf;
  --color-accent-primary-muted: #d9eaff;
  --color-accent-secondary: #8352cf;
  --color-accent-tertiary: #075bb5;
  --color-accent-quaternary: #965bd9;
  --color-accent-overlay: #0969cf66;
  --color-accent-select: #0969cf14;
  --color-accent-background-select: #0969cf33;
  --color-accent-action: #0969cf;
  --color-accent-action-hover: #075bb5;
  --color-accent-default: #e9e9ec;
  --color-accent-off: #f5f5f6;
  --color-shadow-dark: #172b4d24;
  --color-shadow-light: #172b4d14;
  --color-overlay-default: #171b2b50;
  --color-overlay-onboarding: #171b2b66;
  --color-canvas: #e5e5e7;
  --overlay-color: #171b2b50;
}

.default {
  color-scheme: dark;
  --studio-ui-font: "Inter", "Segoe UI", "Arial", sans-serif;
  --studio-panel: #2c2c2e;
  --studio-page: #242426;
  --studio-hover: #38383c;
  --studio-border: #444449;
  --studio-selection: #173c65;
  --studio-selected-text: #a1cfff;
  --studio-muted: #b4b4bd;
  --studio-focus: #77b6ff;
  --studio-raised-shadow: 0 6px 24px #00000040, 0 1px 4px #00000026;
  --studio-card-shadow: 0 1px 3px #00000026;
  --studio-dialog-shadow: 0 20px 80px #00000066, 0 4px 16px #00000040;
  --color-background-default: #2c2c2e;
  --color-background-primary: #2c2c2e;
  --color-background-secondary: #38383c;
  --color-background-tertiary: #343437;
  --color-background-quaternary: #444449;
  --color-background-disabled: #3d3d42;
  --color-foreground-primary: #f4f4f5;
  --color-foreground-secondary: #b4b4bd;
  --color-foreground-disabled: #8b8b96;
  --color-icon-default: #b4b4bd;
  --color-accent-primary: #79b7ff;
  --color-accent-primary-muted: #21466f;
  --color-accent-secondary: #c3a0ff;
  --color-accent-tertiary: #a1cfff;
  --color-accent-quaternary: #c3a0ff;
  --color-accent-overlay: #79b7ff66;
  --color-accent-select: #79b7ff1a;
  --color-accent-background-select: #79b7ff40;
  --color-accent-action: #79b7ff;
  --color-accent-action-hover: #a1cfff;
  --color-accent-default: #444449;
  --color-accent-off: #343437;
  --color-shadow-dark: #00000066;
  --color-shadow-light: #00000033;
  --color-overlay-default: #00000066;
  --color-overlay-onboarding: #00000099;
  --color-canvas: #1e1e20;
  --overlay-color: #00000066;
}

/* Semantic variables are inherited by native controls, without rewriting them.
 * Source: resources/styles/common/refactor/design-tokens.scss. */
.light,
.default {
  --panel-background-color: var(--studio-panel);
  --panel-border-color: var(--studio-border);
  --app-background: var(--studio-page);
  --scrollbar-background-color: var(--studio-muted);
  --button-primary-background-color-rest: #0969cf;
  --button-primary-border-color-rest: #0969cf;
  --button-primary-foreground-color-rest: #ffffff;
  --button-primary-background-color-hover: #075bb5;
  --button-primary-border-color-hover: #075bb5;
  --button-primary-foreground-color-hover: #ffffff;
  --button-primary-background-color-active: #064e9c;
  --button-primary-border-color-active: #064e9c;
  --button-primary-foreground-color-active: #ffffff;
  --button-primary-background-color-focus: #0969cf;
  --button-primary-border-color-focus: var(--studio-focus);
  --button-primary-foreground-color-focus: #ffffff;
  --button-icon-background-color-selected: var(--studio-selection);
  --button-icon-foreground-color-selected: var(--studio-selected-text);
  --button-icon-border-color-selected: transparent;
  --tabs-background-color: var(--studio-panel);
  --tab-background-color-hover: var(--studio-hover);
  --tab-background-color-selected: var(--studio-hover);
  --tab-foreground-color: var(--studio-muted);
  --tab-foreground-color-selected: var(--color-foreground-primary);
  --tab-border-color: transparent;
  --tab-border-color-selected: transparent;
  --layer-row-background-color-hover: var(--studio-hover);
  --layer-row-background-color-selected: var(--studio-selection);
  --layer-row-foreground-color-hover: var(--color-foreground-primary);
  --layer-row-foreground-color-selected: var(--studio-selected-text);
  --input-background-color: var(--color-background-tertiary);
  --input-background-color-rest: var(--color-background-tertiary);
  --input-border-color: transparent;
  --input-border-color-rest: transparent;
  --input-background-color-hover: var(--studio-hover);
  --input-border-color-hover: var(--studio-border);
  --input-background-color-focus: var(--studio-panel);
  --input-border-color-focus: var(--studio-focus);
  --input-background-color-active: var(--studio-panel);
  --input-border-color-active: var(--studio-focus);
  --input-border-outline-color-active: var(--color-accent-select);
  --input-placeholder-color: var(--studio-muted);
  --menu-background-color: var(--studio-panel);
  --menu-background-color-hover: var(--studio-selection);
  --menu-background-color-selected: var(--studio-selection);
  --menu-foreground-color-hover: var(--studio-selected-text);
  --menu-foreground-color-selected: var(--studio-selected-text);
  --context-menu-background-color: var(--studio-panel);
  --context-menu-background-color-selected: var(--studio-selection);
  --context-menu-foreground-color-selected: var(--studio-selected-text);
  --dropdown-background-color: var(--studio-panel);
  --dropdown-separator-color: var(--studio-border);
  --modal-background-color: var(--studio-panel);
  --title-foreground-color: var(--color-foreground-primary);
  --icon-foreground-hover: var(--color-foreground-primary);
}

/* Type: scope to editor chrome. Text objects and typography previews retain
 * their chosen document fonts. Native UI uses Work Sans with weak Cyrillic
 * coverage, so this stack provides a consistent Cyrillic-capable fallback. */
:is(
  .main_ui_dashboard_sidebar__dashboard-sidebar,
  .main_ui_dashboard_files__dashboard-container,
  .main_ui_dashboard_projects__dashboard-container,
  .main_ui_workspace_left_header__workspace-header-left,
  .main_ui_workspace_right_header__workspace-header-right,
  .main_ui_workspace_top_toolbar__toolbar,
  .main_ui_workspace_sidebar__left-sidebar,
  .main_ui_workspace_sidebar__right-sidebar,
  .main_ui_auth__auth-content,
  .main_ui_ds_layout_modal__modal-content
) :is(button, input, textarea, select, label, p, h1, h2, h3, a,
  [class*="__layer-name"], [class*="__element-name"], [class*="__section-title"], [class*="__menu-item"],
  [class*="__element-title"], [class*="__file-name"], [class*="__project-name"],
  [class*="__grid-item-title"], [class*="__grid-item-date"], [class*="__team-name"]):not([style*="font-family"], [style*="font-family"] *) {
  font-family: var(--studio-ui-font) !important;
  letter-spacing: -0.01em;
}

/* Dashboard: files/sidebar modules. Maintain upstream routing and handlers. */
.main_ui_dashboard__dashboard-content {
  background: var(--studio-page);
}

.main_ui_dashboard_sidebar__dashboard-sidebar {
  background: var(--studio-panel);
  border-inline-end: 1px solid var(--studio-border);
}

.main_ui_dashboard_sidebar__sidebar-section-title,
.main_ui_dashboard_sidebar__organization-section-label {
  color: var(--studio-muted);
  text-transform: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.main_ui_dashboard_sidebar__sidebar-nav-item,
.main_ui_dashboard_sidebar__project-element,
.main_ui_dashboard_sidebar__profile,
.main_ui_dashboard_sidebar__switch-content {
  border-radius: 6px;
}

.main_ui_dashboard_sidebar__sidebar-nav-item:hover,
.main_ui_dashboard_sidebar__project-element:hover {
  background-color: var(--studio-hover);
}

.main_ui_dashboard_sidebar__sidebar-search {
  border: 1px solid var(--studio-border);
  border-radius: 6px;
  background: var(--color-background-tertiary);
}

.main_ui_dashboard_sidebar__profile-section {
  border-block-start: 1px solid var(--studio-border);
}

.main_ui_dashboard_projects__project-name,
.main_ui_dashboard_projects__title {
  font-family: var(--studio-ui-font);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: none;
}

.main_ui_dashboard_grid__project-thumbnail:not(.main_ui_dashboard_grid__list-item) {
  border: 1px solid var(--studio-border);
  border-radius: 10px;
  background: var(--studio-panel);
  box-shadow: var(--studio-card-shadow);
  padding: 0;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.main_ui_dashboard_grid__project-thumbnail:not(.main_ui_dashboard_grid__list-item):hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--studio-raised-shadow);
}

.main_ui_dashboard_grid__grid-item-button {
  padding: 0;
}

.main_ui_dashboard_grid__grid-item-thumbnail {
  border-radius: 0;
  border-block-end: 1px solid var(--studio-border);
}

.main_ui_dashboard_grid__grid-item-meta {
  padding: 12px 14px 14px;
}

.main_ui_dashboard_grid__grid-item-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.main_ui_dashboard_grid__grid-item-date {
  font-size: 11px;
  color: var(--studio-muted);
}

/* Workspace: preserve panel widths/heights, resize handles and canvas math. */
.main_ui_workspace_sidebar__left-sidebar {
  border-inline-end: 1px solid var(--studio-border);
}

.main_ui_workspace_sidebar__right-sidebar {
  border-inline-start: 1px solid var(--studio-border);
}

.main_ui_workspace_left_header__workspace-header-left,
.main_ui_workspace_right_header__workspace-header-right {
  background: var(--studio-panel);
  border-block-end: 1px solid var(--studio-border);
}

.main_ui_workspace_left_header__file-name-label {
  font-family: var(--studio-ui-font);
  font-size: 12px;
  font-weight: 600;
}

.main_ui_workspace_top_toolbar__toolbar {
  border-width: 1px;
  border-color: var(--studio-border);
  border-radius: 10px;
  box-shadow: var(--studio-raised-shadow);
  padding: 6px;
}

.main_ui_workspace_top_toolbar__toolbar-group-flyout,
.main_ui_workspace_top_toolbar__toolbar-mcp-dropdown {
  border-radius: 8px;
  border-color: var(--studio-border);
  box-shadow: var(--studio-raised-shadow);
}

.main_ui_workspace_top_toolbar__toolbar-separator {
  margin-inline: 6px;
}

.main_ui_workspace_top_toolbar__toolbar
.main_ui_ds_buttons_icon_button__icon-button[aria-pressed="true"] {
  --button-active-bg-color: #0969cf;
  --button-active-fg-color: #ffffff;
}

/* Native panel headings use headline-small's uppercase transform. Keep the
 * original translated sentence case, scoped to workspace chrome. */
:is(.main_ui_workspace_sidebar__left-sidebar, .main_ui_workspace_sidebar__right-sidebar)
.main_ui_ds_layout_tab_switcher__tab-text {
  font-family: var(--studio-ui-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

:is(.main_ui_workspace_sidebar__left-sidebar, .main_ui_workspace_sidebar__right-sidebar)
.main_ui_ds_layout_tab_switcher__tab[aria-selected="true"]
.main_ui_ds_layout_tab_switcher__tab-text {
  font-weight: 600;
}

:is(.main_ui_workspace_sidebar__left-sidebar, .main_ui_workspace_sidebar__right-sidebar)
:is(
  .main_ui_components_title_bar__title,
  .main_ui_components_title_bar__title-only,
  .main_ui_components_title_bar__inspect-title,
  .main_ui_ds_product_panel_title__panel-title-text
) {
  font-family: var(--studio-ui-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

.main_ui_workspace_sidebar_layer_item__layer-row {
  /* Borders remain 2px: drop indicators depend on these dimensions. */
  border-radius: 4px;
  font-family: var(--studio-ui-font);
  font-size: 12px;
}

.main_ui_workspace_sidebar_layer_item__layer-row.main_ui_workspace_sidebar_layer_item__selected,
.main_ui_workspace_sidebar_layer_item__layer-row.main_ui_workspace_sidebar_layer_item__selected:hover {
  --layer-background-color: var(--studio-selection);
  --shadow-color: var(--studio-selection);
  --layer-foreground-color: var(--studio-selected-text);
}

.main_ui_workspace_sidebar_layer_item__layer-row.main_ui_workspace_sidebar_layer_item__selected
.main_ui_workspace_sidebar_layer_item__toggle-content {
  background-color: var(--studio-selection);
}

/* New design-system primary controls use local variables, separate from
 * legacy --button-primary-* tokens. Override only primary buttons. */
.main_ui_ds_buttons_button__button-primary,
.main_ui_ds_buttons_icon_button__icon-button-primary {
  --button-bg-color: #0969cf;
  --button-fg-color: #ffffff;
  --button-hover-bg-color: #075bb5;
  --button-hover-fg-color: #ffffff;
  --button-active-bg-color: #064e9c;
  --button-active-fg-color: #ffffff;
  --button-focus-bg-color: #0969cf;
  --button-focus-fg-color: #ffffff;
  --button-focus-inner-ring-color: #ffffff;
  --button-focus-outer-ring-color: var(--studio-focus);
  --button-disabled-bg-color: var(--color-background-disabled);
  --button-disabled-fg-color: var(--color-foreground-disabled);
}

.main_ui_ds_buttons_button__button,
.main_ui_ds_buttons_icon_button__icon-button {
  border-radius: 6px;
  font-family: var(--studio-ui-font);
  font-size: 12px;
  font-weight: 500;
}

.main_ui_components_forms__input-wrapper input,
.main_ui_components_forms__input-wrapper textarea {
  border-radius: 6px;
}

/* The React Aria dialog wrapper is a separately built package with hashed
 * styles. Target its semantic structure instead of freezing its build hash. */
html[data-studio="true"] div:has(> [role="dialog"]) {
  border: 1px solid var(--studio-border);
  border-radius: 12px;
  box-shadow: var(--studio-dialog-shadow);
}

.main_ui_ds_layout_modal__modal-header-title {
  font-family: var(--studio-ui-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

.main_ui_auth__auth-section {
  background: var(--studio-page);
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 88px 24px 40px;
}

.main_ui_auth__login-illustration {
  display: none;
}

.main_ui_auth__auth-content {
  grid-column: 1;
  max-inline-size: 440px;
  padding: 32px;
  background: var(--studio-panel);
  border: 1px solid var(--studio-border);
  border-radius: 14px;
  box-shadow: var(--studio-raised-shadow);
}

.main_ui_auth_common__form-submit-btn,
.main_ui_auth_common__form-submit-btn:hover {
  --button-bg-color: #0969cf;
  --button-border-color: #0969cf;
  --button-fg-color: #ffffff;
  border-radius: 6px;
  text-transform: none;
  font-weight: 600;
}

.main_ui_auth_common__form-submit-btn:hover {
  --button-bg-color: #075bb5;
  --button-border-color: #075bb5;
}

.main_ui_auth_common__form-submit-btn:disabled {
  --button-bg-color: var(--color-background-disabled);
  --button-border-color: var(--color-background-disabled);
  --button-fg-color: var(--color-foreground-disabled);
}

/* Compact browser side-panel mode, not a replacement mobile editor.
 * The native inspector needs 318px: 8 fixed 32px columns + 7 gaps of 4px,
 * 24px side padding and the scrollbar gutter. Keep that grid intact.
 * Only the flexible layer pane is narrowed. Native inline resize state is
 * retained and becomes effective again above this breakpoint. Expanded code
 * inspectors/debug panes deliberately keep their normal upstream layout. */
@media (width < 1000px) {
  .main_ui_workspace__workspace {
    --studio-compact-left: 0px;
    --studio-compact-right: 0px;
  }

  .main_ui_workspace__workspace:has(> .main_ui_workspace_sidebar__left-sidebar) {
    --studio-compact-left: 240px;
  }

  .main_ui_workspace__workspace:has(> .main_ui_workspace_sidebar__right-sidebar) {
    --studio-compact-right: 318px;
  }

  .main_ui_workspace__workspace:not(:has(> .main_ui_workspace_sidebar__right-sidebar.main_ui_workspace_sidebar__expanded))
  .main_ui_workspace_sidebar__left-sidebar {
    --left-sidebar-width: 240px !important;
    --left-sidebar-width-max: 240px;
  }

  .main_ui_workspace__workspace:not(:has(> .main_ui_workspace_sidebar__right-sidebar.main_ui_workspace_sidebar__expanded))
  .main_ui_workspace_sidebar__left-sidebar-resize-area {
    display: none;
  }

  .main_ui_workspace__workspace:not(:has(> .main_ui_workspace_sidebar__right-sidebar.main_ui_workspace_sidebar__expanded))
  :is(.main_ui_workspace__workspace-content, .main_ui_workspace__workspace-viewport) {
    min-inline-size: 0;
  }

  .main_ui_workspace__workspace:not(:has(> .main_ui_workspace_sidebar__right-sidebar.main_ui_workspace_sidebar__expanded))
  .main_ui_workspace_top_toolbar__toolbar {
    inset-inline-start: calc((100% + var(--studio-compact-left) - var(--studio-compact-right)) / 2);
    inline-size: max-content;
    max-inline-size: max(120px, calc(100% - var(--studio-compact-left) - var(--studio-compact-right) - 24px));
    padding-block-end: 12px;
  }

  .main_ui_workspace__workspace:not(:has(> .main_ui_workspace_sidebar__right-sidebar.main_ui_workspace_sidebar__expanded))
  .main_ui_workspace_top_toolbar__toolbar-options {
    max-inline-size: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
}

/* Keyboard visibility remains available in every theme. No outline removal. */
:is(
  .main_ui_dashboard_sidebar__dashboard-sidebar,
  .main_ui_workspace_sidebar__left-sidebar,
  .main_ui_workspace_sidebar__right-sidebar,
  .main_ui_workspace_top_toolbar__toolbar,
  .main_ui_auth__auth-content
) :is(button, a):focus-visible {
  outline: 2px solid var(--studio-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .main_ui_dashboard_grid__project-thumbnail,
  .main_ui_workspace_top_toolbar__toolbar {
    transition: none;
  }
}