.template-root[data-brand="palo-alto-ledger"] {
  --brand-tokens-brand-50: #f7eefc;
  --brand-tokens-brand-100: #f1e0fa;
  --brand-tokens-brand-200: #e2c1f6;
  --brand-tokens-brand-300: #c98dec;
  --brand-tokens-brand-400: #ad50e2;
  --brand-tokens-brand-500: #8215c1;
  --brand-tokens-brand-600: #630f95;
  --brand-tokens-brand-700: #4e0a75;
  --brand-tokens-brand-800: #3b0859;
  --brand-tokens-brand-900: #2c0641;
  --brand-tokens-brand-950: #1c0529;

  --brand-tokens-greyscale-10: #fdfdfd;
  --brand-tokens-greyscale-50: #f5f5f6;
  --brand-tokens-greyscale-100: #eaeaec;
  --brand-tokens-greyscale-200: #d7d7da;
  --brand-tokens-greyscale-300: #b4b4b9;
  --brand-tokens-greyscale-400: #8d8d94;
  --brand-tokens-greyscale-500: #66666d;
  --brand-tokens-greyscale-600: #4f4f56;
  --brand-tokens-greyscale-700: #3b3b41;
  --brand-tokens-greyscale-800: #28282c;
  --brand-tokens-greyscale-900: #151517;
  --brand-tokens-greyscale-950: #0e0e0f;
  --brand-tokens-greyscale-1000: #070708;

  --brand-tokens-typography-body: "Instrument Sans";
  --brand-tokens-typography-labels: "Instrument Sans";
  --brand-tokens-typography-titles-a: "Space Grotesk";
  --brand-tokens-typography-titles-b: "Space Grotesk";

  --tint-light: #efeaf8;
  /* The dark plate under the masthead, nav, headline strip and footer: the
     violet's own near-black rather than the neutral ramp's, so the plate and
     the accent belong to the same ink. */
  --plate-ink: #15101d;
  /* Corner radius for photography. Chrome, rules and buttons stay square. */
  --photo-rounding: 10px;
}

.template-root[data-brand="palo-alto-ledger"] .block-container--bg-default,
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-tint {
  --interactive-text-primary-hover: var(--brand-tokens-brand-700);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-800);

  --interactive-contained-primary-hover: var(--brand-tokens-brand-700);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-800);
  /* Section-title squares carry no label, but the kicker colour they sit
     beside is brand-600, so the square matches it. */
  --elevation-fill-default-4: var(--brand-tokens-brand-600);
}

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

/* ---- The dark plate -------------------------------------------------- */

.template-root[data-brand="palo-alto-ledger"] .block-container--bg-inverted {
  --elevation-fill-inverted-1: var(--plate-ink);
  /* brand-300 on the plate ink measures about 9:1; it is the one violet
     signal on the dark surface: tagline, active nav item, strip label. */
  --interactive-text-primary-idle: var(--brand-tokens-brand-300);
  --interactive-text-primary-idle-inverted: var(--brand-tokens-brand-300);
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-100);
  --text-default-4: var(--brand-tokens-brand-300);
}
/* Footer.css sets --footer-masthead on .block-footer itself, so the plate's
   value has to land there too, not on the container. */
.template-root[data-brand="palo-alto-ledger"] .block-footer[data-bg="inverted"] {
  --footer-masthead: var(--brand-tokens-brand-300);
}

/* A soft violet glow behind the masthead so the plate reads as lit, not flat. */
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-inverted:has(.block-header) {
  background-image: radial-gradient(
    90% 140% at 0% 0%,
    color-mix(in srgb, var(--brand-tokens-brand-600) 38%, transparent) 0%,
    transparent 62%
  );
}

/* The strip sits on the same plate; a hairline above separates it from the nav. */
.template-root[data-brand="palo-alto-ledger"]
  .block-container--bg-inverted:has(.block-quick-hits)
  .block-container__inner {
  border-top: 1px solid color-mix(in srgb, var(--brand-tokens-brand-300) 22%, transparent);
  padding-block: 10px;
}
.template-root[data-brand="palo-alto-ledger"]
  .block-container--bg-inverted
  .block-quick-hits__label {
  color: var(--brand-tokens-brand-300);
}

/* ---- Type voice ------------------------------------------------------ */

/* Space Grotesk ships here at 400 and 600 only, so the masthead keeps the
   regular weight and takes its presence from tighter tracking. */
.template-root[data-brand="palo-alto-ledger"] .block-header__masthead {
  letter-spacing: -0.035em;
}
.template-root[data-brand="palo-alto-ledger"] .block-hero__lead-title,
.template-root[data-brand="palo-alto-ledger"] .card__title,
.template-root[data-brand="palo-alto-ledger"] .block-article-hero__title,
.template-root[data-brand="palo-alto-ledger"] .block-cta__headline {
  letter-spacing: -0.02em;
}
.template-root[data-brand="palo-alto-ledger"]
  .block-section-title--v7
  .block-section-title__heading {
  letter-spacing: 0.04em;
}
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-default .block-section-title--v7,
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-tint .block-section-title--v7 {
  border-bottom-color: var(--brand-tokens-brand-200);
}

/* ---- Photography ----------------------------------------------------- */

.template-root[data-brand="palo-alto-ledger"] .card__image,
.template-root[data-brand="palo-alto-ledger"] .block-hero__split-image,
.template-root[data-brand="palo-alto-ledger"] .block-hero__lead-image,
.template-root[data-brand="palo-alto-ledger"] .article-row__image,
.template-root[data-brand="palo-alto-ledger"] .block-article-hero__image,
.template-root[data-brand="palo-alto-ledger"] .block-feature-card__image {
  border-radius: var(--photo-rounding);
}

/* The forecast card in the hero sits on the tint so it reads as a card, not a
   gap in the rail. */
.template-root[data-brand="palo-alto-ledger"] .block-hero .block-weather {
  background-color: var(--tint-light);
  border-radius: var(--photo-rounding);
}

/* ---- Newsletter band ------------------------------------------------- */

/* Use a fixed gradient stop so a tall brand band is not shaded end to end. */
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-brand {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-tokens-brand-950) 32%, transparent) 0,
    transparent 300px
  );
}

/* A white button on the violet band; the default black button fights the plate. */
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-brand .block-cta__button {
  background: var(--brand-tokens-greyscale-10);
  border-color: var(--brand-tokens-greyscale-10);
  color: var(--brand-tokens-brand-900);
}
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-brand .block-cta__button:hover {
  background: var(--brand-tokens-brand-100);
  border-color: var(--brand-tokens-brand-100);
  opacity: 1;
}

/* Painted containers otherwise render typed input text on the field's light fill. */
.template-root[data-brand="palo-alto-ledger"] .block-container--bg-brand .block-cta__input {
  color: var(--brand-tokens-greyscale-900);
}