/* Canonical button primitive (D6). Four variants only: primary (the one
   emphasized action), secondary (default outline, same recipe as the bare
   class), quiet (borderless, for a tertiary action beside a stronger one)
   and danger (D13: only for what is irreversible or cuts access — never for
   restricting visibility, that stays secondary). Every variant keeps the
   same 44px target and only changes border/background/color. Workspace
   contrast measurements are recorded in docs/lapidacao/execucao/f4.md;
   domain accents and inverse surfaces also require their own measurements.
   The same library is loaded on public and authenticated pages. */
.workspace-button {
  min-block-size: var(--control-min-height);
  inline-size: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid var(--component-rule-strong, var(--workspace-rule-strong, var(--form-control-border)));
  border-radius: var(--workspace-radius-control, var(--radius-sm));
  background: transparent;
  padding: .62rem .8rem;
  color: var(--component-ink, var(--workspace-ink, var(--ink-900)));
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--workspace-motion-fast, var(--motion-fast)) var(--workspace-ease, var(--ease-standard)),
    background-color var(--workspace-motion-fast, var(--motion-fast)) var(--workspace-ease, var(--ease-standard)),
    color var(--workspace-motion-fast, var(--motion-fast)) var(--workspace-ease, var(--ease-standard)),
    transform var(--workspace-motion-fast, var(--motion-fast)) var(--workspace-ease, var(--ease-standard));
}

.workspace-button:hover {
  background: var(--component-accent-soft, var(--workspace-accent-soft, var(--accent-soft)));
  color: var(--component-accent-strong, var(--workspace-accent-strong, var(--accent-700)));
  transform: translateY(-1px);
}

.workspace-button--secondary {
  border-color: var(--component-rule-strong, var(--workspace-rule-strong, var(--form-control-border)));
  background: transparent;
  color: var(--component-ink, var(--workspace-ink, var(--ink-900)));
}

.workspace-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--component-ink-soft, var(--workspace-ink-soft, var(--ink-700)));
}

.workspace-button--quiet:hover {
  border-color: transparent;
}

.workspace-button--secondary:hover,
.workspace-button--quiet:hover {
  color: var(--component-secondary-hover-ink, var(--component-accent-strong, var(--workspace-accent-strong, var(--accent-700))));
}

.workspace-button--primary {
  border-color: var(--component-accent, var(--workspace-accent, var(--accent-700)));
  background: var(--component-accent, var(--workspace-accent, var(--accent-700)));
  color: var(--component-on-accent, var(--workspace-on-accent, var(--on-accent)));
}

.workspace-button--primary:hover {
  border-color: var(--component-accent-strong, var(--workspace-accent-strong, var(--accent-700)));
  background: var(--component-accent-strong, var(--workspace-accent-strong, var(--accent-700)));
  color: var(--component-on-accent, var(--workspace-on-accent, var(--on-accent)));
}

/* D13: danger is only for what does not come back or cuts access. The
   border mix was raised from 46% to 64% because 46% measured 2.31:1 on
   --workspace-surface in light mode (below the 3:1 non-text minimum). */
.workspace-button--danger {
  border-color: color-mix(in srgb, var(--workspace-danger, var(--danger)) 64%, transparent);
  color: var(--workspace-danger, var(--danger));
}

.workspace-button--danger:hover {
  border-color: var(--workspace-danger, var(--danger));
  background: color-mix(in srgb, var(--workspace-danger, var(--danger)) 8%, var(--workspace-surface, var(--paper)));
  color: var(--workspace-danger, var(--danger));
}

.workspace-button:disabled,
.workspace-button[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
}

/* Canonical status pill (D6): a fixed situation vocabulary — neutral (the
   bare class, no modifier), progress ("em andamento"), attention
   ("atenção"), success ("sucesso") and error ("erro"). "Arquivado" is not a
   sixth color: it reuses neutral (see web_status helper). Border mixes were
   raised above the tokens used elsewhere (e.g. --workspace-warning-border,
   which measures ~1.8:1) because a 3:1 non-text minimum applies to a status
   pill's own border; contrast is recorded in docs/lapidacao/execucao/f4.md. */
.workspace-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--component-rule-strong, var(--workspace-rule-strong, var(--form-control-border)));
  border-radius: 99rem;
  padding: .18rem .6rem;
  color: var(--component-ink-soft, var(--workspace-ink-soft, var(--ink-700)));
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.35;
}

.workspace-status--progress {
  border-color: color-mix(in srgb, var(--component-accent, var(--workspace-accent, var(--accent-700))) 62%, transparent);
  color: var(--component-accent, var(--workspace-accent, var(--accent-700)));
}

.workspace-status--attention {
  border-color: color-mix(in srgb, var(--workspace-warning, var(--warning)) 70%, transparent);
  color: var(--workspace-warning, var(--warning));
}

.workspace-status--success {
  border-color: color-mix(in srgb, var(--workspace-success, var(--success)) 67%, transparent);
  color: var(--workspace-success, var(--success));
}

.workspace-status--error {
  border-color: color-mix(in srgb, var(--workspace-danger, var(--danger)) 64%, transparent);
  color: var(--workspace-danger, var(--danger));
}

/* Preserve an initially empty live region without drawing an empty pill. */
.workspace-status:empty {
  border: 0;
  padding: 0;
}

.workspace-button[hidden],
.workspace-status[hidden],
.workspace-empty[hidden] {
  display: none;
}

.workspace-empty {
  border-block-color: var(--workspace-rule, var(--rule));
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.workspace-empty :is(h2, h3) {
  max-inline-size: 28ch;
  color: var(--component-ink, var(--workspace-ink, var(--ink-900)));
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  letter-spacing: -.025em;
  line-height: 1.12;
}

/* Canonical empty state (D6, COD-10): the shared rule above only covers the
   heading — this block is the bare .workspace-empty's own contract of
   title + frase + ação (web_empty helper emits exactly this shape). */
.workspace-empty {
  display: grid;
  gap: .65rem;
  justify-items: start;
  text-align: start;
}

.workspace-empty > p {
  max-inline-size: 54ch;
  color: var(--workspace-muted, var(--ink-500));
  line-height: 1.65;
}

.workspace-empty > .workspace-button {
  margin-block-start: .35rem;
}


.workspace-button:focus-visible {
  outline: 3px solid var(--component-focus, var(--workspace-focus, var(--focus-ring)));
  outline-offset: 3px;
}

.workspace-button { max-inline-size: 100%; text-align: center; white-space: normal; font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .workspace-button { transition: none; }
  .workspace-button:hover { transform: none; }
}

/* The library accepts each area's existing accent; domains do not recreate
   button borders, sizes or interaction states. */
.learning-public,
.learning-workspace {
  --component-accent: var(--learning-accent);
  --component-accent-strong: var(--learning-accent-strong);
  --component-accent-soft: var(--learning-surface-muted);
  --component-on-accent: var(--learning-on-accent);
}

.learning-creator-shell {
  --component-accent: var(--lc-accent);
  --component-accent-strong: var(--lc-accent-strong);
  --component-accent-soft: var(--lc-surface-muted);
  --component-on-accent: var(--lc-on-accent);
}

.marketing-hero .marketing-actions,
.marketing-closing .marketing-actions {
  --component-ink: light-dark(#ffffff, #ffffff);
  --component-ink-soft: light-dark(#ffffff, #ffffff);
  --component-rule-strong: light-dark(#ffffff, #ffffff);
  --component-secondary-hover-ink: light-dark(#ffffff, #ffffff);
  --component-focus: light-dark(#ffffff, #ffffff);
  --component-accent-soft: light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 10%));
}

body[data-system-scope="public.business"],
body[data-system-scope="workspace.business"] {
  --component-accent: var(--business-navy);
  --component-accent-strong: var(--business-navy-soft);
  --component-on-accent: var(--business-on-navy);
}

.business-compare-bar {
  --component-focus: var(--business-inverse-surface);
  --component-ink: var(--business-inverse-surface);
  --component-ink-soft: var(--business-inverse-surface);
  --component-rule-strong: var(--business-inverse-surface);
  --component-accent: var(--business-inverse-surface);
  --component-accent-strong: var(--business-inverse-surface);
  --component-on-accent: var(--business-inverse-ink);
}