/* Brand variants. The existing variables and components remain the Spring CC default. */
@font-face {
  font-family: "Degular";
  src: url("https://cdn.prod.website-files.com/66e84d146de0327459ca496a/66e84d146de0327459ca497b_Degular-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Degular Text";
  src: url("https://cdn.prod.website-files.com/66e84d146de0327459ca496a/66e84d146de0327459ca497a_DegularText-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark-family {
  display: none;
  width: min(220px, 46vw);
  height: auto;
}

html[data-brand="spring-family"] {
  --orange: #5e73cc;
  --coral: #dd23bb;
  --sand: #0d0d0d;
  --cream: #181818;
  --card: #181818;
  --ink: #f5f5f5;
  --muted: #d9d9d9;
  --faint: #939393;
  --line: #363636;
  --line-strong: #525252;
  --dark: #080331;
  --dark-ink: #d9e5ff;
  --soft: #20243a;
  --yes: #276447;
  --yes-bg: #173729;
  --no: #d9d9d9;
  --no-bg: #373737;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 42px rgba(0, 0, 0, .22);
  --sans: "Degular Text", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-brand="spring-family"] body {
  background-image:
    radial-gradient(circle at 92% 5%, rgba(94, 115, 204, .22), transparent 28rem),
    radial-gradient(circle at 5% 32%, rgba(221, 35, 187, .08), transparent 22rem);
  background-attachment: fixed;
}

html[data-brand="spring-family"] .wordmark-cc {
  display: none;
}

html[data-brand="spring-family"] .wordmark-family {
  display: block;
}

html[data-brand="spring-family"] h1,
html[data-brand="spring-family"] h2 {
  font-family: "Degular", var(--sans);
  font-weight: 400;
}

html[data-brand="spring-family"] h1 {
  max-width: 12ch;
  font-size: clamp(3.6rem, 8vw, 6.6rem);
  letter-spacing: -.045em;
}

html[data-brand="spring-family"] .sticky-shell {
  background: rgba(13, 13, 13, .92);
  border-top: 1px solid var(--line);
}

html[data-brand="spring-family"] .warning {
  border-color: rgba(94, 115, 204, .65);
  background: rgba(94, 115, 204, .14);
  color: #d9e5ff;
}

html[data-brand="spring-family"] .panel,
html[data-brand="spring-family"] .card,
html[data-brand="spring-family"] .step,
html[data-brand="spring-family"] .changelog details {
  background: linear-gradient(145deg, #1b1b1b, #151515);
}

html[data-brand="spring-family"] .num,
html[data-brand="spring-family"] .icon {
  box-shadow: 0 0 0 5px rgba(94, 115, 204, .13);
}

html[data-brand="spring-family"] .visual-letter {
  background: #5e73cc;
}

html[data-brand="spring-family"] .pill.yes,
html[data-brand="spring-family"] .example.yes .verdict,
html[data-brand="spring-family"] .ack-status.error {
  color: #9fb2ff;
}

html[data-brand="spring-family"] .ack-status.success {
  color: #91d4ae;
}

html[data-brand="spring-family"] .label-copy code {
  background: #20243a;
  color: #c8d2ff;
}

html[data-brand="spring-family"] .ack-card {
  background: #181818;
  color: var(--ink);
}

html[data-brand="spring-family"] footer {
  border-top: 1px solid var(--line);
}

@media print {
  html[data-brand="spring-family"] body {
    background-image: none;
  }
}