@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
@import url("./brand-tokens.css");

body[data-th-ui="workspace"],
body[data-th-ui="workspace-entry"],
body[data-th-ui="public-booking"] {
  --bg: var(--th-color-canvas);
  --page-bg: var(--th-color-canvas);
  --panel: var(--th-color-surface);
  --panel-soft: var(--th-color-surface-soft);
  --surface-soft: var(--th-color-surface-soft);
  --text: var(--th-color-ink);
  --muted: var(--th-color-text-muted);
  --border: var(--th-color-border);
  --line: var(--th-color-border);
  --soft-border: var(--th-color-border-soft);
  --soft-line: var(--th-color-border-soft);
  --accent: var(--th-color-violet);
  --accent-dark: var(--th-color-violet-strong);
  --accent-soft: var(--th-color-violet-soft);
  --success: var(--th-color-success);
  --success-soft: var(--th-color-success-soft);
  --warning: var(--th-color-warning);
  --warning-soft: var(--th-color-warning-soft);
  --danger: var(--th-color-danger);
  --error: var(--th-color-danger);
  --danger-soft: var(--th-color-danger-soft);
  --shadow: var(--th-shadow-card);
  color: var(--th-color-ink);
  font-family: var(--th-font-interface);
}

body[data-th-ui="workspace"] {
  --th-current-control-height: var(--th-control-height-standard);
  --th-current-control-font-size: var(--th-control-font-size-standard);
  --th-current-control-font-weight: var(--th-control-font-weight-standard);
  --th-current-control-line-height: var(--th-control-line-height-standard);
  --th-current-field-font-size: var(--th-field-font-size-standard);
}

body[data-th-ui="workspace"][data-th-density="compact"] {
  --th-current-control-height: var(--th-control-height-compact);
  --th-current-control-font-size: var(--th-control-font-size-compact);
  --th-current-control-font-weight: var(--th-control-font-weight-compact);
  --th-current-control-line-height: var(--th-control-line-height-compact);
  --th-current-field-font-size: var(--th-field-font-size-compact);
}

body[data-th-ui="workspace"] :where(button, input, select, textarea),
body[data-th-ui="workspace-entry"] :where(button, input, select, textarea),
body[data-th-ui="public-booking"] :where(button, input, select, textarea) {
  font-family: inherit;
}

body[data-th-ui="workspace"] [data-dashboard-main-title],
body[data-th-ui="workspace"] .builder-module-header h2,
body[data-th-ui="workspace"] .step-heading h1,
body[data-th-ui="workspace-entry"] h1,
body[data-th-ui="public-booking"] main h1 {
  font-family: var(--th-font-display);
}

body[data-th-ui="workspace"] [data-dashboard-main-title],
body[data-th-ui="workspace"] .step-heading h1,
body[data-th-ui="workspace-entry"] h1,
body[data-th-ui="public-booking"] main h1 {
  letter-spacing: -0.035em;
  font-weight: 700;
}

body[data-th-ui="workspace"] .builder-module-header h2 {
  letter-spacing: -0.025em;
  font-weight: 600;
}

body[data-th-ui="workspace"] :focus-visible,
body[data-th-ui="workspace-entry"] :focus-visible,
body[data-th-ui="public-booking"] :focus-visible {
  outline-color: var(--th-color-violet);
}

body[data-th-ui="workspace"] :is(
  .button-primary,
  .button-secondary,
  .button-danger,
  .button-accent,
  .button-link
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)) {
  min-height: var(--th-current-control-height) !important;
  font-family: var(--th-font-interface) !important;
  font-size: var(--th-current-control-font-size) !important;
  font-weight: var(--th-current-control-font-weight) !important;
  line-height: var(--th-current-control-line-height) !important;
}

body[data-th-ui="workspace"] .site-header :is(button, .button-link) {
  min-height: var(--th-control-height-compact) !important;
  font-family: var(--th-font-interface) !important;
  font-size: var(--th-control-font-size-compact) !important;
  font-weight: var(--th-control-font-weight-compact) !important;
  line-height: var(--th-control-line-height-compact) !important;
}

body[data-th-ui="workspace"] :is(
  .button-primary:not([data-th-action], .button-danger),
  .button-accent:not([data-th-action], .button-danger),
  [data-th-action="primary"]:not(.button-danger)
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)) {
  border-color: var(--th-color-action-primary) !important;
  background: var(--th-gradient-action-primary) !important;
  color: var(--th-color-surface) !important;
  box-shadow: none !important;
  font-weight: var(--th-control-font-weight-primary) !important;
}

body[data-th-ui="workspace"] :is(
  .button-primary:not([data-th-action], .button-danger),
  .button-accent:not([data-th-action], .button-danger),
  [data-th-action="primary"]:not(.button-danger)
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)):is(:hover, :focus-visible) {
  border-color: var(--th-color-action-primary-hover) !important;
  background: var(--th-gradient-action-primary-hover) !important;
  color: var(--th-color-surface) !important;
}

body[data-th-ui="workspace"] :is(
  .button-danger
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)) {
  font-weight: var(--th-control-font-weight-primary) !important;
}

body[data-th-ui="workspace"] :is(
  .button-secondary:not([data-th-action], .button-danger),
  [data-th-action="secondary"]:not(.button-danger)
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)) {
  border-color: var(--th-color-control-border) !important;
  background: var(--th-color-surface) !important;
  color: var(--th-color-ink) !important;
  box-shadow: none !important;
  font-weight: var(--th-control-font-weight-secondary) !important;
}

body[data-th-ui="workspace"] :is(
  .button-secondary:not([data-th-action], .button-danger),
  [data-th-action="secondary"]:not(.button-danger)
):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)):is(:hover, :focus-visible) {
  border-color: var(--th-color-violet) !important;
  background: var(--th-color-violet-soft) !important;
  color: var(--th-color-violet-strong) !important;
}

body[data-th-ui="workspace"] [data-th-action="tertiary"]:not(.button-danger):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)) {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--th-color-ink) !important;
  box-shadow: none !important;
  font-weight: var(--th-control-font-weight-tertiary) !important;
  text-decoration: none !important;
}

body[data-th-ui="workspace"] [data-th-action="tertiary"]:not(.button-danger):not(:is(
  .site-header *,
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)):is(:hover, :focus-visible) {
  color: var(--th-color-violet-strong) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Explicit compact utility actions retained inside otherwise standard pages. */
body[data-th-ui="workspace"] :is(
  .quote-status-control select,
  .quote-card-actions a,
  .search-suggestion-button,
  .module-panel .card-actions button,
  .dashboard-currency-control select,
  .goal-menu .button-secondary,
  .goal-menu .text-button,
  .library-tab,
  .records-tab,
  .adjustment-remove,
  .planned-actions button,
  .expense-card-bottom button,
  .record-card-actions button,
  .record-card-actions a,
  .compact-record button,
  .selected-client .text-button,
  .remove-item,
  .sale-total-card .text-button,
  .add-manual-button,
  .icon-text-button,
  .style-guide-actions button,
  .contrast-warning-row button,
  .review-calculation-button,
  .edit-reset-button
):not(:is(
  .menu-preview *,
  .mini-preview *,
  .quote-document *,
  .export-render-root *,
  .export-page-stage *
)) {
  min-height: var(--th-control-height-compact) !important;
  font-family: var(--th-font-interface) !important;
  font-size: var(--th-control-font-size-compact) !important;
  font-weight: var(--th-control-font-weight-compact) !important;
  line-height: var(--th-control-line-height-compact) !important;
}

/* Dense workspace and header controls stay semibold at the smaller 13px size. */
body[data-th-ui="workspace"][data-th-density="compact"] :is(
  .button-primary,
  .button-secondary,
  .button-danger,
  .button-accent,
  .button-link,
  [data-th-action]
):not(:is(
  .dashboard-sidebar *,
  .menu-preview,
  .menu-preview *,
  .mini-preview,
  .mini-preview *,
  .quote-document,
  .quote-document *,
  .export-render-root,
  .export-render-root *,
  .export-page-stage,
  .export-page-stage *
)),
body[data-th-ui="workspace"] .site-header :is(
  .button-primary,
  .button-secondary,
  .button-danger,
  .button-accent,
  .button-link,
  [data-th-action]
) {
  font-weight: var(--th-control-font-weight-compact) !important;
}

body[data-th-ui="workspace"] :where(dialog, [role="dialog"]) .close-button {
  width: var(--th-control-height-standard) !important;
  min-width: var(--th-control-height-standard) !important;
  height: var(--th-control-height-standard) !important;
  min-height: var(--th-control-height-standard) !important;
  font-family: var(--th-font-interface) !important;
}

body[data-th-ui="workspace"] :where(
  .field,
  .search-field,
  .filter-field,
  .share-field,
  .milestone-field,
  .template-tools,
  .saved-control,
  .profile-field
) :where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="file"],
    [type="color"],
    [type="range"],
    [type="hidden"]
  ),
  select
):not(:is(
  .menu-preview *,
  .mini-preview *,
  .quote-document *,
  .export-render-root *,
  .export-page-stage *
)) {
  min-height: var(--th-current-control-height) !important;
  font-family: var(--th-font-interface) !important;
  font-size: var(--th-current-field-font-size) !important;
  font-weight: var(--th-field-font-weight) !important;
  line-height: var(--th-field-line-height) !important;
}

body[data-th-ui="workspace"] :where(.field, .share-field) textarea:not(:is(
  .menu-preview *,
  .mini-preview *,
  .quote-document *,
  .export-render-root *,
  .export-page-stage *
)) {
  font-family: var(--th-font-interface) !important;
  font-size: var(--th-current-field-font-size) !important;
  font-weight: var(--th-field-font-weight) !important;
  line-height: var(--th-field-line-height) !important;
}

body[data-th-ui="workspace-entry"] #login-button,
body[data-th-ui="public-booking"] .primary-action {
  font-family: var(--th-font-interface);
  font-size: var(--th-control-font-size-standard);
  font-weight: var(--th-control-font-weight-primary);
  line-height: var(--th-control-line-height-standard);
}

body[data-th-ui="workspace-entry"] .oauth-button {
  font-family: var(--th-font-interface);
  font-size: var(--th-control-font-size-standard);
  font-weight: var(--th-control-font-weight-secondary);
  line-height: var(--th-control-line-height-standard);
}

body[data-th-ui="workspace-entry"] #login-button,
body[data-th-ui="public-booking"] .primary-action {
  border-color: var(--th-color-action-primary);
  background: var(--th-gradient-action-primary);
  color: var(--th-color-surface);
}

body[data-th-ui="workspace-entry"] #login-button:is(:hover, :focus-visible),
body[data-th-ui="public-booking"] .primary-action:is(:hover, :focus-visible) {
  border-color: var(--th-color-action-primary-hover);
  background: var(--th-gradient-action-primary-hover);
}

@media (max-width: 640px) {
  body[data-th-ui="workspace"] {
    --th-current-field-font-size: var(--th-field-font-size-mobile);
  }
}

/* Customer-created artifacts retain their selected palette and type. */
body[data-th-ui="workspace"] :where(.menu-preview, .mini-preview, .quote-document) {
  color: var(--preview-text, inherit);
  font-family: var(--preview-body-font, inherit);
}