.template-root[data-brand="vienna-ledger"] {
  --brand-tokens-brand-50: #f5f0f9;
  --brand-tokens-brand-100: #ebe2f3;
  --brand-tokens-brand-200: #d6c6e7;
  --brand-tokens-brand-300: #ad8dce;
  --brand-tokens-brand-400: #7542a9;
  --brand-tokens-brand-500: #5c3088;
  --brand-tokens-brand-600: #47246b;
  --brand-tokens-brand-700: #381b55;
  --brand-tokens-brand-800: #2b1443;
  --brand-tokens-brand-900: #1f0d30;
  --brand-tokens-brand-950: #140920;

  --brand-tokens-greyscale-10: #fbfaf8;
  --brand-tokens-greyscale-50: #f7f5f3;
  --brand-tokens-greyscale-100: #eeebe7;
  --brand-tokens-greyscale-200: #dedad4;
  --brand-tokens-greyscale-300: #bdb6ad;
  --brand-tokens-greyscale-400: #9c9386;
  --brand-tokens-greyscale-500: #6d655a;
  --brand-tokens-greyscale-600: #585046;
  --brand-tokens-greyscale-700: #453e36;
  --brand-tokens-greyscale-800: #312c26;
  --brand-tokens-greyscale-900: #201d18;
  --brand-tokens-greyscale-950: #15120f;
  --brand-tokens-greyscale-1000: #0c0b08;
  --brand-tokens-typography-body: "DM Sans";
  --brand-tokens-typography-labels: "DM Sans";
  --brand-tokens-typography-titles-a: "DM Serif Text";
  --brand-tokens-typography-titles-b: "DM Serif Text";
  --tint-light: #f0ecf1;
}

.template-root[data-brand="vienna-ledger"] .block-section-title {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* DM Serif Text ships at 400; this prevents synthesized bold in shared titles. */
.template-root[data-brand="vienna-ledger"] .card__title,
.template-root[data-brand="vienna-ledger"] .block-article-hero__title,
.template-root[data-brand="vienna-ledger"] .block-hero__lead-title,
.template-root[data-brand="vienna-ledger"] .block-section-title__heading {
  font-weight: 400;
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-default .card-section-label,
.template-root[data-brand="vienna-ledger"] .block-container--bg-tint .card-section-label {
  color: var(--brand-tokens-brand-400);
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-default .block-section-title__bar,
.template-root[data-brand="vienna-ledger"] .block-container--bg-tint .block-section-title__bar {
  background-color: var(--brand-tokens-brand-400);
}

.template-root[data-brand="vienna-ledger"] {
  --interactive-text-primary-idle: var(--brand-tokens-brand-500);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-500);
  --interactive-text-primary-hover: var(--brand-tokens-brand-700);
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-inverted {
  --text-inverted-4: var(--brand-tokens-brand-300);
  --interactive-text-primary-idle: var(--brand-tokens-brand-300);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-300);
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-brand {
  --text-inverted-4: var(--brand-tokens-brand-200);
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-200);
  --interactive-text-primary-hover: var(--brand-tokens-brand-100);
}

/* Scope the header wash because this recipe uses other tint Containers. */
.template-root[data-brand="vienna-ledger"] .block-container--bg-tint:has(.block-header) {
  background-image:
    radial-gradient(
      70% 120% at 86% -10%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 26%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-300) 10%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-300) 5%, transparent) 74%,
      transparent 100%
    );
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-default:has(.block-menubar) {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-300) 8%, transparent) 0%,
    transparent 100%
  );
}

.template-root[data-brand="vienna-ledger"] .block-container--bg-inverted {
  background-image: radial-gradient(
    120% 90% at 50% 118%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 22%, transparent) 0%,
    transparent 64%
  );
}