/* Emerald City Wire (proposal 022): evergreen, Puget Sound blue-gray and a
   salmon signal on cream paper, Fraunces over Public Sans. Tokens only: every
   look below is a palette value or an optional role from _starter.css, and
   block CSS carries no emerald-city-wire rule. */
.template-root[data-brand="emerald-city-wire"] {
  /* Evergreen. 600 is the brand accent (#143c30). */
  --brand-tokens-brand-50: #eef3f0;
  --brand-tokens-brand-100: #d7e4dc;
  --brand-tokens-brand-200: #b3cbbd;
  --brand-tokens-brand-300: #86ab98;
  --brand-tokens-brand-400: #5b8a73;
  --brand-tokens-brand-500: #2f5d4a;
  --brand-tokens-brand-600: #143c30;
  --brand-tokens-brand-700: #113328;
  --brand-tokens-brand-800: #0f2a21;
  --brand-tokens-brand-900: #0d241c;
  --brand-tokens-brand-950: #0b1712;

  /* Warm paper greys. 10 is the page, 900 is ink and the inverted fill. */
  --brand-tokens-greyscale-10: #f6f4ee;
  --brand-tokens-greyscale-50: #efece3;
  --brand-tokens-greyscale-100: #e8e4d8;
  --brand-tokens-greyscale-200: #ded8c8;
  --brand-tokens-greyscale-300: #c3bfb2;
  --brand-tokens-greyscale-400: #9a9c95;
  --brand-tokens-greyscale-500: #6b746d;
  --brand-tokens-greyscale-600: #566058;
  --brand-tokens-greyscale-700: #3d4741;
  --brand-tokens-greyscale-800: #2a352f;
  --brand-tokens-greyscale-900: #14231d;
  --brand-tokens-greyscale-950: #0f1b16;
  --brand-tokens-greyscale-1000: #0b1712;

  --brand-tokens-typography-body: "Public Sans";
  --brand-tokens-typography-labels: "Public Sans";
  --brand-tokens-typography-titles-a: "Fraunces";
  --brand-tokens-typography-titles-b: "Fraunces";

  /* The City Desk plate lifts to white on the cream page. */
  --tint-light: #ffffff;

  /* Optional roles (proposal 022). */
  --accent-secondary: #3d5b66;
  --accent-signal: #e1592f;
  --accent-signal-strong: #b8431f;
  --label-tone-civic: var(--brand-tokens-brand-600);
  --label-tone-everyday: var(--accent-secondary);
  --numbered-list-index-color: var(--accent-signal);
  --card-fill: #ffffff;
  --card-pad: 12px;
  --card-surface-radius: 10px;
  --card-image-radius: 10px;
  --card-lead-image-radius: 20px;
  --card-shadow:
    0 1px 2px rgba(20, 35, 29, 0.08), 0 1px 1px rgba(20, 35, 29, 0.04);
  --panel-radius: 10px;
  --card-grid-align: stretch;
  --menubar-current-underline: 4px;
  --menubar-current-underline-offset: 4px;
  --menubar-current-underline-color: var(--brand-tokens-greyscale-900);
}