:root {
  /* Politicker static-page brand palette */
  --color-yellow: #f5f48b;
  --color-teal: #1a807d;
  --color-grey: #364242;
  --color-cream: #fafaf2;

  /* RGB channels for transparent variants */
  --color-yellow-rgb: 255 252 84;
  --color-teal-rgb: 26 128 125;
  --color-grey-rgb: 54 66 66;
  --color-cream-rgb: 250 250 242;

  /* Shared semantic aliases for legacy/static styles */
  --color-primary: var(--color-teal);
  --color-primary-dark: color-mix(
    in srgb,
    var(--color-teal) 60%,
    var(--color-grey)
  );
  --color-accent: var(--color-teal);
  --color-accent-surface: var(--color-yellow);
  --color-accent-light: color-mix(
    in srgb,
    var(--color-yellow) 55%,
    var(--color-cream)
  );
  --color-text: var(--color-grey);
  --color-text-light: color-mix(
    in srgb,
    var(--color-grey) 72%,
    var(--color-cream)
  );
  --color-text-muted: color-mix(
    in srgb,
    var(--color-grey) 58%,
    var(--color-cream)
  );
  --color-background: var(--color-cream);
  --color-surface: var(--color-cream);
  --color-surface-muted: color-mix(
    in srgb,
    var(--color-grey) 5%,
    var(--color-cream)
  );
  --color-surface-strong: color-mix(
    in srgb,
    var(--color-grey) 10%,
    var(--color-cream)
  );
  --color-border: color-mix(in srgb, var(--color-grey) 18%, var(--color-cream));
  --color-border-strong: color-mix(
    in srgb,
    var(--color-grey) 28%,
    var(--color-cream)
  );
  --color-light-gray: var(--color-surface-muted);
  --color-charts-bg: var(--color-cream);
  --color-overlay: rgb(var(--color-grey-rgb) / 0.8);

  /* Static blog and chart aliases, derived only from the brand palette */
  --color-blog-title-green: var(--color-teal);
  --color-blog-category: var(--color-teal);
  --color-blog-title: var(--color-teal);
  --color-blog-author: var(--color-text-muted);
  --color-blog-text: var(--color-grey);
  --color-economy: var(--color-teal);
  --color-immigration: var(--color-yellow);
  --color-social-security: var(--color-grey);
  --color-health: color-mix(
    in srgb,
    var(--color-teal) 70%,
    var(--color-yellow)
  );
  --color-education: color-mix(
    in srgb,
    var(--color-grey) 72%,
    var(--color-yellow)
  );
  --color-foreign: color-mix(in srgb, var(--color-teal) 55%, var(--color-grey));

  /* Feedback states expressed with the same four-color palette */
  --color-success-background: color-mix(
    in srgb,
    var(--color-teal) 14%,
    var(--color-cream)
  );
  --color-success-text: var(--color-teal);
  --color-success-border: color-mix(
    in srgb,
    var(--color-teal) 38%,
    var(--color-cream)
  );
  --color-error-background: color-mix(
    in srgb,
    var(--color-yellow) 35%,
    var(--color-cream)
  );
  --color-error-text: var(--color-grey);
  --color-error-border: var(--color-yellow);
  --color-info-background: color-mix(
    in srgb,
    var(--color-teal) 10%,
    var(--color-cream)
  );
  --color-info-text: var(--color-grey);
  --color-info-border: color-mix(
    in srgb,
    var(--color-teal) 32%,
    var(--color-cream)
  );
}