/* web3-checkout-flow.css */

text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.th {
  font-size: 14px;
  font-weight: 500;
  fill: #1a1a1a;
}

.ts {
  font-size: 12px;
  font-weight: 400;
  fill: #4a5260;
}

.caption {
  font-size: 12px;
  fill: #888780;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.arr {
  stroke: #6b7280;
  fill: none;
  stroke-width: 1.5;
}

.lifeline {
  stroke: #d3d1c7;
  stroke-width: 0.5;
  stroke-dasharray: 4 4;
}

.gray rect {
  fill: #f1efe8;
  stroke: #5f5e5a;
}
.gray .th {
  fill: #2c2c2a;
}

.teal rect {
  fill: #e1f5ee;
  stroke: #0f6e56;
}
.teal .th {
  fill: #04342c;
}

.coral rect {
  fill: #faece7;
  stroke: #993c1d;
}
.coral .th {
  fill: #4a1b0c;
}

.purple rect {
  fill: #eeedfe;
  stroke: #534ab7;
}
.purple .th {
  fill: #26215c;
}

@media (prefers-color-scheme: dark) {
  .th {
    fill: #e6edf3;
  }

  .ts {
    fill: #c9d1db;
  }

  .caption {
    fill: #6b7280;
  }

  .arr {
    stroke: #8b95a1;
  }

  .lifeline {
    stroke: #3a3a38;
  }

  .gray rect {
    fill: #2c2c2a;
    stroke: #b4b2a9;
  }
  .gray .th {
    fill: #f1efe8;
  }

  .teal rect {
    fill: #04342c;
    stroke: #5dcaa5;
  }
  .teal .th {
    fill: #e1f5ee;
  }

  .coral rect {
    fill: #4a1b0c;
    stroke: #f0997b;
  }
  .coral .th {
    fill: #faece7;
  }

  .purple rect {
    fill: #26215c;
    stroke: #afa9ec;
  }
  .purple .th {
    fill: #eeedfe;
  }
}