.template-root[data-brand="draper-herald"] {
  --brand-tokens-brand-50: #fcf9f3;
  --brand-tokens-brand-100: #f9f4e7;
  --brand-tokens-brand-200: #f5ecd6;
  --brand-tokens-brand-300: #f0e0bc;
  --brand-tokens-brand-400: #ebd4a3;
  --brand-tokens-brand-500: #e7c788;
  --brand-tokens-brand-600: #e2bb6f;

  --brand-tokens-brand-700: #deb054;
  --brand-tokens-brand-800: #93671a;
  --brand-tokens-brand-900: #694611;
  --brand-tokens-brand-950: #472d0b;

  --brand-tokens-greyscale-10: #faf8f5;
  --brand-tokens-greyscale-50: #f5f4ef;
  --brand-tokens-greyscale-100: #eceae4;
  --brand-tokens-greyscale-200: #dcd8d0;
  --brand-tokens-greyscale-300: #c5bfb5;
  --brand-tokens-greyscale-400: #a39b8f;

  --brand-tokens-greyscale-500: #5f584f;
  --brand-tokens-greyscale-600: #4e4841;
  --brand-tokens-greyscale-700: #3d3833;
  --brand-tokens-greyscale-800: #2f2b27;
  --brand-tokens-greyscale-900: #221f1c;
  --brand-tokens-greyscale-950: #171412;
  --brand-tokens-greyscale-1000: #0e0d0b;

  --brand-tokens-typography-body: "Instrument Sans";
  --brand-tokens-typography-labels: "Barlow Semi Condensed";
  --brand-tokens-typography-titles-a: "Bitter";
  --brand-tokens-typography-titles-b: "Bitter";

  --tint-light: #f9f4e7;
}

.template-root[data-brand="draper-herald"] .block-container--bg-default {
  --text-default-4: var(--brand-tokens-brand-900);
  --elevation-fill-default-4: var(--brand-tokens-brand-900);
  --interactive-text-primary-idle: var(--brand-tokens-brand-900);
  --interactive-text-primary-hover: var(--brand-tokens-brand-950);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-950);

  --interactive-outlined-secondary-on-toggled-idle: var(--brand-tokens-greyscale-900);
}

.template-root[data-brand="draper-herald"] {
  --interactive-contained-primary-idle: var(--brand-tokens-brand-900);
  --interactive-contained-primary-hover: var(--brand-tokens-brand-950);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-950);
}

/* This light brand surface needs dark text tokens, including the signup input. */
.template-root[data-brand="draper-herald"] .block-container--bg-brand {
  --text-default-1: var(--brand-tokens-greyscale-900);
  --text-default-2: var(--brand-tokens-greyscale-800);
  --text-default-3: var(--brand-tokens-greyscale-800);
  --text-default-4: var(--brand-tokens-brand-950);
  --interactive-text-primary-idle: var(--brand-tokens-brand-950);
  --interactive-text-primary-hover: var(--brand-tokens-greyscale-900);
  --interactive-text-primary-pressed: var(--brand-tokens-greyscale-900);

  --hairline-color: color-mix(in srgb, var(--brand-tokens-greyscale-700) 40%, transparent);
}

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

.template-root[data-brand="draper-herald"] .block-container--bg-default:has(.block-header) {
  background-image:
    radial-gradient(
      64% 116% at 88% -12%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 42%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-600) 20%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-600) 6%, transparent) 78%,
      transparent 100%
    );
}

.template-root[data-brand="draper-herald"] .card-section-label {
  letter-spacing: 0.1em;
}