@import url("../current/tokens/brand-tokens.css");

:root[data-app] {
  --brand-ink: var(--fam-ink);
  --brand-accent: var(--app-from);
  --ink: var(--fam-ink);
  --text: var(--fam-ink);
  --muted: var(--fam-slate);
  --accent: var(--app-from);
  --accent-dark: var(--fam-ink);
  --blue: var(--app-from);
  --blue-dark: var(--fam-ink);
  --purple: var(--app-to);
  --brand: var(--app-from);
  --brand-dark: var(--fam-ink);
  --brand-soft: #edf2fa;
  --ms-blue: var(--app-from);
  --ms-blue-dark: var(--fam-ink);
  --ms-purple: var(--app-to);
  --ms-text: var(--fam-ink);
  --ms-muted: var(--fam-slate);
  --ms-bg: var(--fam-mist);
  --ms-border: #dce2ec;
  --line: #dce2ec;
  --pulse-navy: var(--fam-ink);
  --pulse-violet: var(--fam-publisher-light);
  --pulse-gradient: var(--app-gradient);
  --pulse-neutral-light: var(--fam-mist);
  font-family: var(--fam-font);
  color: var(--fam-ink);
  background: var(--fam-mist);
}

:root[data-app] body {
  font-family: var(--fam-font);
  color: var(--fam-ink);
  background: var(--fam-mist);
}

:root[data-app] :where(button, input, select, textarea) {
  font-family: var(--fam-font);
}

:root[data-app] :where(h1, h2, h3) {
  font-family: var(--fam-font-display);
}

:root[data-app] :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--fam-publisher-light);
  outline-offset: 4px;
}

:root[data-app] .fam-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  color: var(--fam-ink);
  text-decoration: none;
  letter-spacing: normal;
  white-space: normal;
}

:root[data-app] .fam-brand-icon {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

:root[data-app] .fam-brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}

:root[data-app] .fam-brand-name {
  margin: 0;
  color: var(--fam-ink);
  font: 600 19px/1.15 var(--fam-font-display);
  letter-spacing: normal;
}

:root[data-app] .fam-brand-descriptor {
  margin: 0;
  color: var(--fam-slate);
  font: 400 12px/1.3 var(--fam-font);
}

:root[data-app] .fam-brand-publisher {
  display: block;
  margin: 0;
  color: var(--fam-publisher-light);
  font: 600 12px/1.35 var(--fam-font);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

:root[data-app] .fam-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 24px;
  color: var(--fam-slate);
  font: 400 13px/1.6 var(--fam-font);
}

:root[data-app] .fam-footer p {
  max-width: 780px;
  margin: 0;
}

:root[data-app] .fam-footer a {
  color: var(--fam-publisher-light);
  text-underline-offset: 3px;
}

:root[data-app] :is(.app-header, .topbar, .pulse-shell-header) {
  height: auto;
  min-height: 88px;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid #dce2ec;
  background: #fff;
}

:root[data-app] .app-header nav {
  flex-wrap: wrap;
  gap: 16px;
}

:root[data-app] .app-shell {
  background: var(--fam-mist);
}

:root[data-app] :is(.card, .workspace, .workflow-card, .status-card, .workspace-panel) {
  border-color: #dce2ec;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgb(14 26 51 / 7%);
}

:root[data-app] :is(.primary-action, .primary-link, .primary-button, .btn-primary, .button.primary, .url-row > button) {
  color: #fff;
  background: var(--app-from);
  border-color: var(--app-from);
}

:root[data-app] :is(.primary-action, .primary-link, .primary-button, .btn-primary, .button.primary, .url-row > button):hover:not(:disabled) {
  color: #fff;
  background: var(--fam-ink);
  border-color: var(--fam-ink);
}

:root[data-app] :is(.step, .progress-bar) {
  background: var(--app-from);
}

:root[data-app] .hero h1 {
  color: var(--fam-ink);
  background: none;
}

:root[data-app] .hero h1 em {
  font-family: var(--fam-font-display);
  color: var(--app-from);
}

:root[data-app] .fam-hero-symbol {
  display: block;
  width: 240px;
  height: 240px;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 640px) {
  :root[data-app] .fam-brand-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  :root[data-app] .fam-brand-publisher {
    font-size: 11px;
  }

  :root[data-app] :is(.app-header, .topbar) {
    align-items: flex-start;
    gap: 12px;
  }

  :root[data-app] .topbar > p {
    display: none;
  }

  :root[data-app] .app-header {
    padding-inline: 20px;
  }

  :root[data-app] .model-chip {
    margin-left: 48px;
  }
}