@scope (heatmap-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --heatmap-gap-default:              var(--a-space-1);
    --heatmap-cell-radius-default:      var(--a-radius-xs);
    --heatmap-inset-default:            var(--a-inset);
    --heatmap-aspect-default:           auto;
    --heatmap-cell-min-size-default:    0.75rem;

    /* ── Colors ── */
    --heatmap-empty-bg-default:         var(--a-bg-muted);
    --heatmap-border-default:           1px solid var(--a-border-subtle);
    --heatmap-text-default:             var(--a-fg);
    --heatmap-label-default:            var(--a-fg-subtle);

    /* ── Data ramp (5 buckets) ──
       Sequential tint scale, sourced from the L2 `--a-{family}-bucket-N`
       semantic aliases (see styles/colors/semantics.css §BUCKETS). The
       L2 layer handles light-dark() polarity so step 0 reads as
       low-intensity in either scheme without per-component math. */
    --heatmap-bucket-0-default:         var(--a-accent-bucket-0);
    --heatmap-bucket-1-default:         var(--a-accent-bucket-1);
    --heatmap-bucket-2-default:         var(--a-accent-bucket-2);
    --heatmap-bucket-3-default:         var(--a-accent-bucket-3);
    --heatmap-bucket-4-default:         var(--a-accent-bucket-4);

    /* ── Legend ── */
    --heatmap-legend-size-default:      var(--a-caption-size);
    --heatmap-legend-gap-default:       var(--a-space-1);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--heatmap-gap, var(--heatmap-gap-default));
    color: var(--heatmap-text, var(--heatmap-text-default));
    font-size: var(--a-body-size);
  }

  /* Title slot */
  :scope > [slot="title"] {
    font-weight: 600;
    margin: 0;
  }

  /* Month labels row (day-grid mode) */
  :scope > [data-months] {
    display: grid;
    gap: var(--heatmap-gap, var(--heatmap-gap-default));
    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
    color: var(--heatmap-label, var(--heatmap-label-default));
  }

  :scope [data-month-label] {
    line-height: 1;
  }

  /* Grid of cells */
  :scope > [data-grid] {
    display: grid;
    gap: var(--heatmap-gap, var(--heatmap-gap-default));
  }

  :scope[aspect="square"] > [data-grid] {
    aspect-ratio: 1 / 1;
  }

  :scope[aspect="wide"] > [data-grid] {
    aspect-ratio: auto;
  }

  :scope [data-cell] {
    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
    min-width: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
    min-height: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
    aspect-ratio: 1 / 1;
    cursor: default;
    transition: transform var(--a-duration-fast) var(--a-easing-out);
  }

  :scope [data-cell][data-v] {
    cursor: pointer;
  }

  :scope [data-cell][data-v]:hover {
    transform: scale(1.15);
    outline: var(--heatmap-border, var(--heatmap-border-default));
  }

  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }

  /* Legend strip */
  :scope > [data-legend] {
    display: flex;
    align-items: center;
    gap: var(--heatmap-legend-gap, var(--heatmap-legend-gap-default));
    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
    color: var(--heatmap-label, var(--heatmap-label-default));
    margin-top: var(--heatmap-gap, var(--heatmap-gap-default));
  }

  :scope [data-legend-swatch] {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
    display: inline-block;
  }

  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }

  /* ── Color-scheme variants (token overrides only) ── */

  :scope[color-scheme="success"] {
    --heatmap-bucket-0-default: var(--a-success-bucket-0);
    --heatmap-bucket-1-default: var(--a-success-bucket-1);
    --heatmap-bucket-2-default: var(--a-success-bucket-2);
    --heatmap-bucket-3-default: var(--a-success-bucket-3);
    --heatmap-bucket-4-default: var(--a-success-bucket-4);
  }

  :scope[color-scheme="warning"] {
    --heatmap-bucket-0-default: var(--a-warning-bucket-0);
    --heatmap-bucket-1-default: var(--a-warning-bucket-1);
    --heatmap-bucket-2-default: var(--a-warning-bucket-2);
    --heatmap-bucket-3-default: var(--a-warning-bucket-3);
    --heatmap-bucket-4-default: var(--a-warning-bucket-4);
  }

  :scope[color-scheme="danger"] {
    --heatmap-bucket-0-default: var(--a-danger-bucket-0);
    --heatmap-bucket-1-default: var(--a-danger-bucket-1);
    --heatmap-bucket-2-default: var(--a-danger-bucket-2);
    --heatmap-bucket-3-default: var(--a-danger-bucket-3);
    --heatmap-bucket-4-default: var(--a-danger-bucket-4);
  }

  :scope[color-scheme="info"] {
    --heatmap-bucket-0-default: var(--a-info-bucket-0);
    --heatmap-bucket-1-default: var(--a-info-bucket-1);
    --heatmap-bucket-2-default: var(--a-info-bucket-2);
    --heatmap-bucket-3-default: var(--a-info-bucket-3);
    --heatmap-bucket-4-default: var(--a-info-bucket-4);
  }
}
