/* GENERATED by scripts/marketing/build-actions.mjs. Edit src/styles/brand-actions.css. */
/* Shared action contract for React and static marketing pages.
 * Colors/type follow /brand. The 6px action radius is documented there too.
 * Static output is generated by scripts/marketing/build-actions.mjs.
 * Duh deliberately does not load this stylesheet.
 */
:root,
[data-action-theme="light"] {
  --action-primary: #4e52ff;
  --action-primary-foreground: #fff;
  --action-primary-hover: #2d31eb;
  --action-primary-active: #2225bf;
  --action-ink: #0d1929;
  --action-surface: #fff;
  --action-subtle: #eceef5;
  --action-border: #7c8798;
  --action-focus: #4e52ff;
  --action-radius: 6px;
  --action-font: "Geist", system-ui, -apple-system, sans-serif;
}

.dark,
[data-action-theme="dark"] {
  --action-primary: #7d80ff;
  --action-primary-foreground: #0d1929;
  --action-primary-hover: #9699ff;
  --action-primary-active: #a3a5ff;
  --action-ink: #f3f4f6;
  --action-surface: #0f131a;
  --action-subtle: #212631;
  --action-border: #7c8798;
  --action-focus: #9699ff;
}

.brand-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--action-radius);
  font-family: var(--action-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  -webkit-tap-highlight-color: transparent;
}

.brand-action--primary {
  background: var(--action-primary);
  color: var(--action-primary-foreground);
}
.brand-action--primary:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-foreground);
}
.brand-action--primary:active {
  background: var(--action-primary-active);
}

.brand-action--outline {
  border-color: var(--action-border);
  background: var(--action-surface);
  color: var(--action-ink);
}
.brand-action--outline:hover,
.brand-action--outline:active {
  background: var(--action-subtle);
  color: var(--action-ink);
}

/* For a closing CTA on a saturated brand-blue or ink panel. */
.brand-action--inverse {
  --action-focus: #fff;
  background: #fff;
  color: #4e52ff;
}
.brand-action--inverse:hover,
.brand-action--inverse:active {
  background: #e3e4ff;
  color: #2225bf;
}

.brand-action--sm { height: 36px; padding: 8px 12px; }
.brand-action--md { height: 40px; padding: 8px 16px; }
.brand-action--lg { height: 44px; padding: 10px 20px; }
.brand-action--hero {
  min-height: 52px;
  padding: 13px 22px;
  white-space: normal;
}
.brand-action--icon { height: 40px; width: 40px; padding: 0; }
.brand-action--circle { border-radius: 50%; }

.brand-action > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  pointer-events: none;
}
.brand-action > span[aria-hidden="true"] {
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}
.brand-action:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: 3px;
}
.brand-action:disabled,
.brand-action[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .brand-action { transition: none; }
}