@layer semantics {
  .color-section {
    color: var(--general-pre-heading);
  }
  .color-section-title {
    color: var(--general-pre-heading);
  }
  .color-pre-heading {
    color: var(--general-pre-heading);
  }
  .color-display {
    color: var(--general-display);
  }
  .color-headline {
    color: var(--general-headline);
  }
  .color-cta {
    color: var(--color-display);
  }
  .color-body {
    color: var(--general-body);
  }
  .color-body-secondary {
    color: var(--general-body-secondary);
  }
  .color-utility {
    color: var(--general-utility);
  }
  .color-quote {
    color: var(--general-quote);
  }
  .color-stats {
    color: var(--general-stats);
  }
  .color-pictogram {
    color: var(--general-pictogram);
  }
  .color-pictogram svg path,
  .color-pictogram svg circle,
  .color-pictogram svg rect,
  .color-pictogram svg polygon {
    fill: currentcolor;
  }
  .color-icon {
    color: var(--general-icons);
  }
  .section-bg {
    background-color: var(--general-bg);
  }
  .section-bg-secondary {
    background-color: var(--general-bg-secondary);
  }
  .surface-panel.panel-bg {
    background-color: var(--panel-bg);
  }
  .surface-panel .color-section {
    color: var(--panel-section-title);
  }
  .surface-panel .color-section-title {
    color: var(--panel-section-title);
  }
  .surface-panel .color-pre-heading {
    color: var(--panel-pre-heading);
  }
  .surface-panel .color-display {
    color: var(--panel-display);
  }
  .surface-panel .color-headline {
    color: var(--panel-headline);
  }
  .surface-panel .color-cta {
    color: var(--panel-display);
  }
  .surface-panel .color-body {
    color: var(--panel-body);
  }
  .surface-panel .color-body-secondary {
    color: var(--panel-body-secondary);
  }
  .surface-panel .color-utility {
    color: var(--panel-utility);
  }
  .surface-panel .color-quote {
    color: var(--panel-quotes);
  }
  .surface-panel .color-stats {
    color: var(--panel-stats);
  }
  .surface-panel .color-pictogram {
    color: var(--panel-pictograms);
  }
  .surface-panel .color-icon {
    color: var(--panel-icons);
  }
  .surface-card.card-bg {
    background-color: var(--card-bg);
  }
  .surface-card .color-section {
    color: var(--card-section-title);
  }
  .surface-card .color-section-title {
    color: var(--card-section-title);
  }
  .surface-card .color-pre-heading {
    color: var(--card-pre-heading);
  }
  .surface-card .color-title {
    color: var(--card-title);
  }
  .surface-card .color-display {
    color: var(--card-title);
  }
  .surface-card .color-headline {
    color: var(--card-title);
  }
  .surface-card .color-cta {
    color: var(--card-display);
  }
  .surface-card .color-body {
    color: var(--card-body);
  }
  .surface-card .color-body-secondary {
    color: var(--card-body-secondary);
  }
  .surface-card .color-utility {
    color: var(--card-utility);
  }
  .surface-card .color-quote {
    color: var(--card-quote);
  }
  .surface-card .color-stats {
    color: var(--card-stats);
  }
  .surface-card .color-pictogram {
    color: var(--card-pictograms);
  }
  .surface-card .color-icon {
    color: var(--card-utility);
  }
  .surface-card:hover, .surface-card:focus-within {
    background-color: var(--card-hover-bg);
  }
  .surface-card:hover .color-pre-heading,
  .surface-card:hover .color-title,
  .surface-card:hover .color-headline,
  .surface-card:hover .color-body, .surface-card:focus-within .color-pre-heading,
  .surface-card:focus-within .color-title,
  .surface-card:focus-within .color-headline,
  .surface-card:focus-within .color-body {
    color: var(--card-hover-fg);
    transition: color 0.25s;
  }
  .panel-radius {
    border-radius: var(--panel-border-radius);
    overflow: hidden;
  }
  .card-radius {
    border-radius: var(--card-border-radius);
    overflow: hidden;
  }
  .card-border {
    border: solid calc(var(--card-border-weight) * 1px) var(--card-border-colour);
  }
  .card-border:hover {
    border: solid calc(var(--card-border-weight) * 1px) var(--card-hover-border);
  }
  .card-shadow {
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) var(--card-shadow-blur) var(--card-shadow-colour);
    transition: box-shadow 0.25s;
  }
  .card-shadow:hover {
    box-shadow: var(--card-hover-card-shadow-offset) var(--card-hover-card-shadow-offset) var(--card-hover-card-shadow-colour);
  }
  .panel-shadow {
    box-shadow: var(--panel-shadow-offset) var(--panel-shadow-offset) var(--panel-shadow-blur) var(--panel-shadow-colour);
  }
  .panel-backdrop {
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
  .card-backdrop {
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
}