/* NC DS Icon Button 1384:1323; theme pattern 1394:1485. */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.v12 {
  --ink: var(--color-text-primary);
  --muted: var(--color-text-supporting-accessible);
  --canvas: var(--color-background-primary);
  --line: var(--color-stroke-default);
  --violet: var(--color-accent-purple);
  --violet-text: var(--color-accent-purple);
  --mint: var(--color-accent-teal);
  --color-accent-teal-text: var(--color-tag-text-teal);
  --color-accent-purple-text: var(--color-accent-purple);
  color: var(--color-text-supporting-accessible);
}
.icon-button {
  display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border: var(--border-width-thin) solid var(--color-stroke-medium);
  border-radius: var(--radius-md); background: transparent;
  color: var(--color-text-primary); cursor: pointer;
}
.icon-button[hidden] { display: none; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--color-surface-purple-12); }
.icon-button:active { background: var(--color-surface-purple-20); }
.icon-button:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 3px; }
[data-theme-icon="moon"] { display: none; }
html[data-theme="dark"] [data-theme-icon="sun"] { display: none; }
html[data-theme="dark"] [data-theme-icon="moon"] { display: block; }
.v12-nav { padding-block: 10px; gap: 24px; }
.v12-nav nav { margin-left: auto; align-items: center; }
.v12-nav nav a { color: var(--color-text-supporting-accessible); }
.v12-nav nav a:hover { color: var(--color-text-primary); }
.v12 .work-card, .v12 .audience-card, .v12 .process { background: var(--color-surface-card); }
.v12 .work-card { color: var(--color-card-text-muted); }
.v12 .work-card .section-label, .v12 .work-card .media-disclosure { color: var(--color-card-text-muted); }
.v12 .tag--blue, .v12 .case-study-tags li.tag--blue { color: var(--color-tag-text-blue); }
.v12 .tag--mint, .v12 .case-study-tags li.tag--mint { color: var(--color-tag-text-teal); }
.v12 .tag--pink { color: var(--color-card-text-pink); }
.v12 .tag--neutral { color: var(--color-card-text-muted); }
.v12 .tag--green { color: var(--color-tag-text-green); }
.v12 .tag--amber { color: var(--color-tag-text-amber); }
.v12 .work-card .tag--violet { color: var(--color-card-text-purple); }
.v12 .work-card .detail { color: var(--color-card-text-purple); border-color: currentColor; }
.v12 .work-card img { filter: brightness(calc(1 - var(--media-image-dim-opacity) / 100)); }
.v12 .showcase figcaption { color: var(--color-text-supporting-accessible); }
html[data-theme="dark"] .v12-nav.is-scrolled,
html[data-theme="dark"] .case-study-topbar { background: rgba(8, 7, 13, .72); }
html[data-theme="dark"] .case-study-topbar.is-scrolled { background: rgba(8, 7, 13, .88); }
html[data-theme="dark"] .case-study-research-table { background: var(--color-background-primary); }
html[data-theme="dark"] .v12-footer .section-label,
html[data-theme="dark"] .case-study-section-label { color: var(--color-text-supporting-accessible); }
@media (max-width: 640px) {
  .v12-nav { display: grid; grid-template-columns: 1fr 44px; gap: 10px 16px; padding: 10px 24px; }
  .v12-nav > a { grid-column: 1; grid-row: 1; }
  .v12-nav > .icon-button { grid-column: 2; grid-row: 1; }
  .v12-nav nav { grid-column: 1 / -1; grid-row: 2; margin: 0; min-height: 34px; gap: 24px; }
  .case-study-topbar__navigation { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .icon-button { transition: none; } }
/* Keyboard entry and primary actions retain their semantic contrast in both modes. */
.v12 .skip-link { color: var(--color-background-primary); background: var(--color-text-primary); }
.v12 .button--primary { color: var(--color-button-primary-text); background: var(--color-button-primary-bg); }
.v12 .button--primary:hover { color: var(--color-text-primary); background: var(--color-surface-purple-20); }
.v12 .showcase #toggle { color: var(--color-text-primary); opacity: 1; }

.v12 .tag--violet, .v12 .case-study-tags li.tag--violet { color: var(--color-card-text-purple); }