/* Independent design-system axes for review. */
html[data-radius="square"] {
  --ds-radius-s: 2px;
  --ds-radius-m: 4px;
  --ds-radius-l: 6px;
  --ds-radius-pill: 4px;
}

html[data-radius="soft"] {
  --ds-radius-s: 8px;
  --ds-radius-m: 14px;
  --ds-radius-l: 22px;
  --ds-radius-pill: 16px;
}

html[data-radius="rounded"] {
  --ds-radius-s: 12px;
  --ds-radius-m: 20px;
  --ds-radius-l: 30px;
  --ds-radius-pill: 999px;
}

html[data-density="compact"] {
  --ds-section-gap: clamp(3.25rem, 7vw, 5rem);
  --ds-card-pad: 1.3rem;
  --ds-content-gap: .9rem;
}

html[data-density="balanced"] {
  --ds-section-gap: clamp(4.5rem, 9vw, 7rem);
  --ds-card-pad: 1.6rem;
  --ds-content-gap: 1.2rem;
}

html[data-density="airy"] {
  --ds-section-gap: clamp(5.5rem, 11vw, 8.5rem);
  --ds-card-pad: clamp(1.8rem, 3vw, 2.2rem);
  --ds-content-gap: 1.5rem;
}

html[data-surface="outline"] {
  --ds-card-bg: var(--ds-surface);
  --ds-card-border: var(--ds-line);
  --ds-card-shadow: none;
  --ds-card-hover-shadow: 0 18px 44px -34px rgba(10, 20, 14, .36);
}

html[data-surface="soft"] {
  --ds-card-bg: color-mix(in srgb, var(--ds-surface) 82%, var(--ds-accent-soft));
  --ds-card-border: color-mix(in srgb, var(--ds-line) 72%, var(--ds-accent));
  --ds-card-shadow: none;
  --ds-card-hover-shadow: 0 18px 44px -32px color-mix(in srgb, var(--ds-accent) 34%, transparent);
}

html[data-surface="elevated"] {
  --ds-card-bg: var(--ds-surface);
  --ds-card-border: color-mix(in srgb, var(--ds-line) 74%, transparent);
  --ds-card-shadow: 0 16px 46px -36px rgba(8, 16, 11, .48);
  --ds-card-hover-shadow: 0 26px 58px -34px color-mix(in srgb, var(--ds-accent) 28%, rgba(8, 16, 11, .42));
}